Стиль сайта в зависимости от сезона

Question

Привет, я работаю над сайтом для друга. Она хочет использовать другую таблицу стилей для каждого сезона; один на зиму, весну, лето и осень.

Я думал о следующем подходе ... Я создал сайт, используя style.css для каждого сезона, теперь все, что мне нужно сделать, это загрузить соответствующий style.css на период времени года ,

Но как это сделать?

Answer 1

Вы можете использовать альтернативные таблицы стилей

<link rel="stylesheet" type="text/css" title="summer" href="summer.css"> 
<link rel="alternate stylesheet" type="text/css" title="spring" href="spring.css"> 
<link rel="stylesheet" type="text/css" title="fall" href="fall.css"> 
<link rel="alternate stylesheet" type="text/css" title="winter" href="winter.css"> 

А затем создать сценарий

function setActiveStyleSheet(title) { 
    var links=document.getElementsByTagName("link"); 
    for(var i=0; i<styles.length; i++) { 
    style=styles[i]; 
    if(style.getAttribute("rel").indexOf("style") != -1 && style.getAttribute("title")) { 
     style.disabled = true; 
     if(style.getAttribute("title") == title){ 
      style.disabled = false; 
     } 
    } 
    } 
} 

А потом обнаружить сезон, вы можете использовать

var month=new Date().getMonth(); 
if(month<2 || month==11){ 
    setActiveStyleSheet("winter"); 
}else if(month<5){ 
    setActiveStyleSheet("spring"); 
}else if(month<8){ 
    setActiveStyleSheet("summer"); 
}else if(month<11){ 
    setActiveStyleSheet("fall"); 
} 

Очевидно, что вы можете сделать выбор сезона более точный, но это даст вам хотя бы рудиментарный сезон

Answer 2

Я призываю вас использовать PHP, потому что у пользователя может быть отключен javascript.

Это будет мой подход:

PHP:

//season.php file 
header("Content-type: text/css"); 

function getSeason() 
{ 
    $season_dates = array('/12/21'=>'winter', 
         '/09/21'=>'autumn', 
         '/06/21'=>'summer', 
         '/03/21'=>'spring', 
         '/12/31'=>'winter'); 

    foreach ($season_dates as $key => $value) // Loop through the season dates 
    { 
     $season_date = date("Y").$key; 
     if (strtotime("now") > strtotime($season_date)) // If we're after the date of the starting season 
     { 
      return $value; 
     } 
    } 
} 

$season = getSeason(); 

echo file_get_contents("$season.css"); 

HTML:

<link rel="stylesheet" type="text/css" href="season.php">