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

Итак, чтобы нам сделать например смену стилей по времени для начала нам необходимо создать файлы стилей:

  • style_morning.css
  • style_day.css
  • style_evening.css
  • style_night.css

    • Создайте даные файлы в папке стилей (style) или переместите ранее созданные файлы.

    Создавать полностью копию файла стиля не обязательно. Нам достаточно подгружать только необходимые изменения.

    Напишем JavaScript для наших изменений.

    
<script type="text/javascript">// <![CDATA[
function change(css)
	{document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\">');}
	var h=(new Date()).getHours();
	if (h > 23 || h <7) change('_night');//ночь
	if (h > 6 && h < 12) change('_morning');//утро
	if (h > 11 && h < 19) change('_day');//день
	if (h > 18 && h < 24) change('_evening');//вечер
// ]]></script>

    Вот соббственно и все! Данный скрипт будет подключать в ваш проект стили с 00 до 6 - будет подключен style_night.css , с 8 до 11 style_morning.css, с 12 до 18 style_day.css, а с 19 до 23 style_evening.css

    Но чтобы поменять например стили в связи с новым годом, то код будет такой:

    	
<script type="text/javascript">
function change(css) 
{document.write('<link href=\"\/templates\/_ваш стиль_\/css\/styles'+css+'.css\" rel=\"stylesheet\">');} 
	var now = new Date(),
	month = now.getMonth(),
	day = now.getDate();
	if( (month == 11 && day >=15) || (month == 0 && day <= 15) ) change('_novogodniy');
	if( (month == 0 && day >=16) || (month == 11 && day <= 14) ) change('_osnovnoy');
</script>

    Пользуйтесь на здоровье!