Question

您好我正在为朋友工作。她想为每个季节使用不同的样式表;一个适合冬季，春季，夏季和秋季。

我在考虑以下方法...... 我每个季节都使用style.css构建网站，现在我所要做的就是在一年中的某段时间内加载相应的style.css。

但是怎么做？

Answer 1

我鼓励您使用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">

Answer 2

您可以使用替代样式表

<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");
}

显然，你可以让赛季选择更准确，但这至少会给你一个基本的赛季

该网站的风格取决于季节

2 个答案: