Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Смена оформления по дням недели

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


     25.01.2012    js, css    Все вопросы » Общие вопросы по вёрстке    3797

вопрос
Доброго времени суток.
Возникла необходимость менять дизайн сайта на определнный день недели (пятницу), но в остальные дни дизайн должен оставаться стандартным. Полагаю, это возможно сделать при помощи 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
Юзер

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

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

ravchik
Юзер

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
Местный

test-templates - 28 января 2012 01:40 -

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

ravchik
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

ravchik
Юзер

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>

Апельсин
Юзер

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

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

djgelius
Юзер

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
Юзер

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
Юзер

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

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

Abe
Юзер

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

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

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

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

наверх