• 19
  • апр
  • 2024
В новостях:
Веб-программирование

Изменение дизайна сайта в зависимости от времени суток

Изменение внешнего вида сайта в зависимости от времени суток это довольно интересный способ придать некоторую изюминку вашему сайту. Реализовать это можно довольно просто с помощью javascript.

Изменение дизайна сайта в зависимости от времени суток
Поделиться в соцсетях:

Представленный ниже код позволяет менять оформление сайта каждые 3-4 часа, основываясь на времени пользователя.

<script type="text/javascript">
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);
 // End -->
 }
 </script>
 <script type="text/javascript">getCSS();</script>

Все что требуется от вас, так это написать соответствующие стили.

Для людей которые отключают javascript можно добавить стили используемые по-умолчанию:

<noscript>
   <link rel="stylesheet" href="/tree_sunset.css" type="text/css">
</noscript>
Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям