Хаки и Скрипты Next Generation CMS : JS, Интерфейс : Меняем стили по времени суток на JS

irbees2008 Опубликовано - 8 - мая JS

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css html

Вот покапался на просторах инета и нашел скрипт смены стилей по времени.Сейчас и разберем как их установить.
И так задача сделать два файла стиля day.css и night.css,один для дневного оформления,второй для ночного оформления.
Один из них будет основным и подключаем его в секцию HEAD

Код:

<link id="style" rel="stylesheet" type="text/css" href="css/day.css" />

Ну и сразу после можно подключить скрипт

Код:

<script type="text/javascript">
  var date = new Date(); // Получаем текущие дату и время
  var h = date.getHours(); // Получаем текущий час
  if (h < 8 || h > 21) document.getElementById("style").href = "css/night.css"; // Если сейчас ночь, то меняем файл стилей
</script>

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

Код:

<script type="text/javascript">
theTime = new Date();
theHour = theTime.getHours();
theMinute = theTime.getMinutes();
if(theHour>=9&&theHour<=17){
document.body.style.cssText = "background: #59b0ee url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg1.jpg') top center repeat-x";
}
else if(theHour>6&&theHour<9){
document.body.style.cssText = "background: #26abf6 url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg2.jpg') top center repeat-x";
}
else if(theHour>17&&theHour<21){
document.body.style.cssText = "background: #26abf6 url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg3.jpg') top center repeat-x";
}
else{
document.body.style.cssText = "background: #155e87 url('http://site.ru/public/style_images/vash_stil/_backgrounds/bg4.jpg') top center repeat-x";
}
</script>

Можешь почитать и вот эту статейку "Настраиваем разный дизайн короткой новости по чету и нечету"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.