• 836
  • 0
  • Адаптировал: 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>

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

mistakes

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

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

Ваше мнение

Какие темы вам интереснее?
Результаты

----