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

DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Смена оформления по дням недели

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

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

вопрос

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

А вот и нужная Вам переменная!!!
По ссылке найдите 5й пункт там все расписано:

http://web-disign.ru/spiski_javascript.html

Юзер

453

ravchik - 2015-05-1327 января 2012 12:03 - #3335

Попытался сделать, получилось так:
код в 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 - 2015-05-1328 января 2012 01:40 - #3359

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

Юзер

453

ravchik - 2015-05-1328 января 2012 14:27 - #3370

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

Админ

3457

ПафНутиЙ - 2015-05-1328 января 2012 14:38 - #3372

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

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

Юзер

453

ravchik - 2015-05-1328 января 2012 14:43 - #3373

Может кому понадобится - окончательный РАБОТАЮЩИЙ вариант:

<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>

Юзер

562

Апельсин - 2015-05-1319 декабря 2015 07:37 - #51153

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

Юзер

djgelius - 2015-05-1312 августа 2013 22:55 - #15612

мне нужно подобное только выводить код со слайдера в дни недели! Афиши!
как это все реализовать?

<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>

Юзер

453

ravchik - 2015-05-1319 декабря 2015 18:38 - #51162

<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 - 2015-05-1319 декабря 2015 19:29 - #51163

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