Не нравятся результаты поиска? Попробуйте другой поиск!

Смена оформления по дням недели


     25.01.2012    Общие вопросы по вёрстке    3503

вопрос
Доброго времени суток.
Возникла необходимость менять дизайн сайта на определнный день недели (пятницу), но в остальные дни дизайн должен оставаться стандартным. Полагаю, это возможно сделать при помощи javascript (смена CSS-стиля). В JS не то что 0, а скорее -1
З.Ы. Подсказали такой скрипт
<link rel="stylesheet" href="{THEME}/css/style.css" type="text/css" media="screen, projection" />
<script>
(function(){
  var date = new Date(),
      time = +date,
      day = ( 12 - date.getDay() ) % 7;
  function friday(){
    document.getElementsByTagName('link')[0].setAttribute('href', '{THEME}/css/friday.css')
  }
  if(day) {//не пятница
    date.setDate( date.getDate() + day )
    date.setHours( 0, 0, 0, 0 )
    setTimeout( friday , date - time )
  }else{  //пятница
    friday()
  }
})()
</script>

но он не работает...

Ответил: MozgFx


Подобное было реализовано немного проще...
Если Вам надо менять только таблицу стилей, а не менять шаблон то вот образец реализованый на Джумле:
[leech=http://neojoomla.com/demo/templates/clockingmachine/]ClockingMachine[/leech]

В код вставляем две строки перед тегом head:
<script language="javascript" type="text/javascript" src="http://www.neojoomla.com/demo/templates/clockingmachine/templates/clockingmachine/getcss.js"></script>

<script type="text/javascript">
    getCSS( 'http://www.neojoomla.com/demo/templates/clockingmachine/templates/clockingmachine' );
</script>


Сам файл getcss.js выглядит вот так:
function getCSS( templatepath ) {

    datetoday   = new Date();
    timenow        = datetoday.getTime();
    datetoday.setTime(timenow);
    thehour     = datetoday.getHours();
    
    
    if (thehour >= 21) {
        display = "night.css";
    }else if (thehour >= 18) {
        display = "sunset.css";
    }else if (thehour >= 10) {
        display = "noon.css";
    }else if (thehour >= 7) {
        display = "morning.css";
    }else if (thehour >= 0) {
        display = "night.css";
    }else{
        display = "sunset.css";
    }
    var css = '<link href="' + templatepath + '/css/' + display + '" rel="stylesheet" type="text/css" />';
    
    document.write(css);
}


Здесь шаблон меняется от времени суток но подправить для дней не составит сложности даже для Вас. Включите немого логики и все получиться.

Комментарии пользователей (11)

MozgFx
1

39 | 23

MozgFx - 27 января 2012 10:04 - Юзер

А вот и нужная Вам переменная!!!
По ссылке найдите 5й пункт там все расписано:
http://web-disign.ru/spiski_javascript.html

ravchik
66

375 | 123

ravchik - 27 января 2012 12:03 - Юзер

Попытался сделать, получилось так:
код в main.tpl
<script language="javascript" type="text/javascript" src="{THEME/css}/fr.js"></script>
<script type="text/javascript">
    getCSS( '{THEME}' );
</script>

Предварительно убрал обычный <link href=".../style.css".. />

код в fr.js
function getCSS( {THEME} ) {

// Инициируем новый объект типа Date
today = new Date()
// Получаем текущий день недели, 0 - воскресенье, 1 - понедельник и т.д.
day = today.getDay()    
    
    if (day = 5) {
        display = "friday.css";
    }else{
        display = "style.css";
    }
    var css = '<link href="' + {THEME} + '/css/' + display + '" rel="stylesheet" type="text/css" />';
    
    document.write(css);
}


...Не работает
Не выводит ни обычный style.css, ни friday.css..
Что я сделал не так?

test-templates
2

29 | 23

test-templates - 28 января 2012 01:40 - Местный

код {THEME} в js не обрабатывается, пишите полный путь

ravchik
66

375 | 123

ravchik - 28 января 2012 14:27 - Юзер

test-templates, указывал и абсолютный путь, не работает :(
он не только не меняет CSS, но и не вставляет обычный ксс

ПафНутиЙ
1065

3394 | 2433

ПафНутиЙ - 28 января 2012 14:38 - Админ

нужно в отладчике смотреть, желательно на живом сайте.

Каков вопрос - таков и ответ. Просто помните об этом.

ravchik
66

375 | 123

ravchik - 28 января 2012 14:43 - Юзер

Может кому понадобится - окончательный РАБОТАЮЩИЙ вариант:
<script language="javascript">
function getCSS() {
// Инициируем новый объект типа Date
today = new Date()
// Получаем текущий день недели, 0 - воскресенье, 1 - понедельник и т.д.
day = today.getDay()    
    if (day == 5) {
        display = "абсолютный путь/friday.css";
    }else{
        display = "абсолютный путь/style.css";
    }
    var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>';    
    document.write(css);
}
</script>

<script language="javascript">
    getCSS();
</script>

Апельсин
3

308 | 82

Апельсин - 19 декабря 2015 07:37 - Юзер

у меня не работает, а очень надо...

djgelius
21

djgelius - 12 августа 2013 22:55 - Юзер

мне нужно подобное только выводить код со слайдера в дни недели! Афиши!
как это все реализовать?
<script language="javascript">
function getCSS() {
// Инициируем новый объект типа Date
today = new Date()
// Получаем текущий день недели, 0 - воскресенье, 1 - понедельник и т.д.
day = today.getDay()    
    if (day == 5) {
        display = "абсолютный путь/friday.css";
    }else{
        display = "абсолютный путь/style.css";
    }
    var css = '<'; css+='link rel="stylesheet" href=' + display + ' \/'; css+='>';    
    document.write(css);
}
</script>

<script language="javascript">
    getCSS();
</script>

ravchik
66

375 | 123

ravchik - 19 декабря 2015 18:38 - Юзер

<script>
$(document).ready(function()
{
    var today = new Date();
    var day = today.getDay();    
    if (day == 5) // в пятницу
        $("#slider").load("путь к файлу с кодем слайдера для пятницы");
    else if (day == 6) // в субботу и далее по аналогии
        $("#slider").load("путь к файлу с кодем слайдера для субботы");
});
</script>

<div id="slider">тут будет загружен код слайдера</div>
вроде должно работать, не проверял

djgelius
21

djgelius - 19 декабря 2015 19:29 - Юзер

ravchik,спсибо уже не нужно но такой вопрос мне нужно выводить код плеера еженедельно в определенное время как это сделать?
Например каждое воскресенье с 22 до 23 часов

Abe
1

Abe - 23 февраля 2016 14:38 - Юзер

в любой из версий можно реализовать с помощью небольшого добавления в index.php и собственно CSS

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы