Динамическая смена дизайна главной страницы

Aleksty · April 6, 2011

Здравствуйте.

Немного предыстории.

Главная страница оформлена с использованием фрагментов картин известных художников.

Есть шесть файлов стилей, которые меняются в зависимости от времени.

Вопрос в следующем:

Как добавить в нужное место текстовый комментарий?

Это просто упоминание о художнике, работы которого использованы при оформлении.

Скрипт -

<script type="text/javascript">

date = new Date();

a = date.getHours();

if (a > 23){

document.write("<link rel='stylesheet' href='style1.css' type='text/css' media='screen'>");

}else if (a > 20){

document.write("<link rel='stylesheet' href='style2.css' type='text/css' media='screen'>");

}else if (a > 17){

document.write("<link rel='stylesheet' href='style3.css' type='text/css' media='screen'>");

}else if (a > 14){

document.write("<link rel='stylesheet' href='style4.css' type='text/css' media='screen'>");

}else if (a > 11){

document.write("<link rel='stylesheet' href='style5.css' type='text/css' media='screen'>");

}else if (a > 7){

document.write("<link rel='stylesheet' href='style6.css' type='text/css' media='screen'>");

}else{

document.write("<link rel='stylesheet' href='style1.css' type='text/css' media='screen'>");

}

</script>

</head>

<body>

<noscript>

<link href="style1.css" rel="stylesheet" type="text/css" />

</noscript>

Сюда нужно вставить комментарии, после тега спан (у спана есть атрибут float:left) -

<div id="copy"><span>&&&&&&&&&&&&&&&&&&&</span></div>

PS. Пробовал так, не получается:

box = document.getElementById('copy');

boxn = document.createElement('span');

boxn.id = 'comment';

boxn.innerHTML = '—————-ТЕКСТ————--';

box.appendChild(boxn);

Edited April 6, 2011 by Aleksty

Great Rash · April 6, 2011

PS. Пробовал так, не получается:
box = document.getElementById('copy');
boxn = document.createElement('span');
boxn.id = 'comment';
boxn.innerHTML = '—————-ТЕКСТ————--';
box.appendChild(boxn);

А должно получиться, т.к. код верный. Только вызывать его надо после загрузки DOM (или внизу страницы или при наступлении события load у объекта window).

Aleksty · April 6, 2011

Опа....

Спасибо! Я его в хедере прописывал, прямо в этом скрипте!

Ща попробую

Great Rash · April 6, 2011

В хедере просто так работать не будет. Т.к. при выполнении скрипта элемента, который вы ищете, может еще не существовать (так и происходит), и тогда скрипт выдает ошибку.

Aleksty · April 6, 2011

А прикрутить разные комментарии к разным временным отрезкам нужно при помощи if?

Тут мне малость непонятно (даже многость непонятно )!

Тогда нужно весь скрипт изменений стилей включить в какую-то функцию?

И в боди прописать вызов ее?

Что-то типа этого:

1. onLoad - функция мзменения стилей

2. if(a>23){ вызов функции комментария}

3. ???????? тут не пойму! Или на кждый комментарий своя функция?

или так - if(getHours() > 23){комментарий 1}?

Edited April 6, 2011 by Aleksty

Great Rash · April 6, 2011


<html>
<head>
  <title>Моя страница</title>

  <script type="text/javascript">
    var a = new Date().getHours();

    if (a > 23){
      document.write('<link rel="stylesheet" href="style1.css" type="text/css" media="screen">');
    } else if (a > 20) {
      document.write('<link rel="stylesheet" href="style2.css" type="text/css" media="screen">');
    } else if (a > 17) {
      document.write('<link rel="stylesheet" href="style3.css" type="text/css" media="screen">');
    } else if (a > 14) {
      document.write('<link rel="stylesheet" href="style4.css" type="text/css" media="screen">');
    } else if (a > 11) {
      document.write('<link rel="stylesheet" href="style5.css" type="text/css" media="screen">');
    } else if (a > 7) {
      document.write('<link rel="stylesheet" href="style6.css" type="text/css" media="screen">');
    } else {
      document.write('<link rel="stylesheet" href="style7.css" type="text/css" media="screen">');
    }

    window.onload = function() {
      var box = document.getElementById('copy');
      var boxn = document.createElement('span');

      if (a > 23) {
        boxn.innerHTML = 'какой-то текст';
      } else if (a > 20) {
        boxn.innerHTML = 'какой-то текст';
      } else if (a > 17) {
        // и т.п.
      }

      box.appendChild(boxn);
    }
  </script>
</head>
<body>

  <div id="copy"></div>

</body>
</html>

Aleksty · April 6, 2011

СПАСИБИЩЕ!!!!!!!!!!!

Век живи, век учись... Дальше неправильно

ЗЫ. ВСЕ СРАБОТАЛО!!!

Только пришлось сюда добавить кое чего -

window.onload = function(){

var a = new Date().getHours();

Edited April 6, 2011 by Aleksty

Aleksty · April 6, 2011

Кстати!

Возник вопрос при возне с этим скриптом, да и не только с ним!

Подскажите, есть-ли в яваскрипт возможность явного объявления глобальной переменной?

Например в LUA это - setglobal(переменная); и все, дальше она видна отовсюду, вызываешь getglodal();

Все что нарыл по этой теме, так это обращение к функции в которой объявлена переменная!

А если нет функции?

В примере, что выше, именно так и происходит!

В контейнере яваскрипт объявлена переменная "а", но уже из функции, которая в том же контейнере ее нельзя вызвать, она не видна.

Или я что-то не догоняю, или есть какая-то возможность избежать дублирования?

Подскажите!!!!

Все время натыкаюсь на эту замороку.

Great Rash · April 6, 2011

Любая переменная, объявленная вне функции или без ключевого слова var, является глобальной. На самом деле в JS есть несколько глобальных объектов. Например это window. И когда вы объявляете переменную вне функции (или внутри функции, но без var), то она становится свойством объекта window. Вот код, который наглядно это демонстрирует:


<html>
<head>
  <title>Моя страница</title>

  <script type="text/javascript">
    var a = 'global';
  </script>
</head>
<body>

  <!-- и где-то на странице -->
  <script type="text/javascript">
    alert(a);
    alert(a == window.a);
  </script>

</body>
</html>

psywalker · April 6, 2011

Да, и наверное вместо if подойдёт инструкция switch

 switch(a){
case >23:
 document.write('<link rel="stylesheet" href="style1.css" type="text/css" media="screen">');
break;
case >20:
      document.write('<link rel="stylesheet" href="style2.css" type="text/css" media="screen">');
break;
case >17:
  document.write('<link rel="stylesheet" href="style3.css" type="text/css" media="screen">');
break;
case >14:
 document.write('<link rel="stylesheet" href="style1.css" type="text/css" media="screen">');
break;
}

И т.д.

Aleksty · April 6, 2011

Нда....

Все гениальное просто.

Спасибо за пространный ответ.

Нигде, кроме этого форума, не находил такого простого и доступного объяснения.

В основном это беседы инопланетян на своем языке

Еще раз спасибо!!!!

s0rr0w · April 6, 2011

<title>Моя страница</title>


    var a = new Date().getHours();
    document.write('<link rel="stylesheet" href="style1'+a+'.css" type="text/css" media="screen">');

Потом 24 css, в которых сделать

@import url('night.css');

@import url('morning.css');

и так далее, в зависимости от времени суток.

Edited April 6, 2011 by s0rr0w

Aleksty · April 6, 2011

    var a = new Date().getHours();
    document.write('<link rel="stylesheet" href="style1'+a+'.css" type="text/css" media="screen">');
Потом 24 css, в которых сделать
@import url('night.css');
@import url('morning.css');
и так далее, в зависимости от времени суток.

Понятно.

Спасибо!

Я уже начал конспект заполнять, основываясь на ответах ваших ребят

По крайней мере прояснение в голове наступает.

Sign In

Динамическая смена дизайна главной страницы

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information