Смена оформления сайта

Подобное, конечно, не новинка, и технически совершенно не сложно, но возможно кому-то это покажется интересным и нужным.

Сразу отмечу, что меня побудил написать пост этот блог.

Многие видели в сети и писали скрипты, которые здороваются с посетителем по разному, в зависимости от времени суток ("доброе утро", "добрый день", "привет тебе, человек с бессонницей"). Но можно пойти дальше, меняя оформление сайта, путём переключателя CSS.

Вот к чему мы будем стремиться:

Были выбраны следущие промежутки времени:

С пяти утра, до восьми;

С восьми утра, до полудня;

С полудня, до трёх дня;

С трёх дня, до шести вечера;

С шести вечера, до девяти;

С девяти вечера до пяти утра;

Изменять и дополнять эти промежутки времени труда не составит.

Сам код:

<script>
function getCSS() {
    datetoday = new Date();
    timenow = datetoday.getTime();
    datetoday.setTime(timenow);
    thehour = datetoday.getHours();
    if (thehour > 20)
        display = "tree_twilight.css";
    else if (thehour > 17)
        display = "tree_sunset.css";
    else if (thehour > 14)
        display = "tree_afternoon.css";
    else if (thehour > 11)
        display = "tree_noon.css";
    else if (thehour > 7)
        display = "tree_morning.css";
    else if (thehour > 4)
        display = "tree_sunrise.css";
    else if (thehour > 1)
        display = "tree_twilight.css";
    else
        display = "tree_sunset.css";
    var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>';
    document.write(css);
}
</script>

<script>getCSS();</script>

Устанавливаем один из стилей как дефолтный, на случай, если у пользователя отключен JS.

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

Ну и приготовьте все нужные стили, без них не зафурычит.

Источник: Смена оформления сайта в зависимости от времени суток

Реклама