如何使用JavaScript基于Season更改CSS

时间：2015-01-05 03:56:38

标签： javascript html css html5 dynamic

对不起，如果这是一个简单的问题，但我需要帮助。我正在努力创造一个动态的＆＃39;每个季节都会改变页面/网站外观的页面（基于Southern Hemisphere Seasons）。我有CSS中设置的颜色，标题，图像和背景，我想在夏季，冬季，秋季和春季时更改，以及DAY特定圣诞节和新年的附加功能。我已经从我的页面中包含了内嵌JavaScript，以及与CSS相关的内容。有人可以帮忙，因为它不起作用!!! 

<script>
        // JavaScript Document
        $(document).ready(function(){
        var d = new Date();
        var m = d.getMonth();
        var n = d.getDate();
        if ( m >= 3 && m <= 5 )
        (
            // If date is between March and May inclusive, apply autumn theme to ‘body’
            document.body.className = "autumn";
        )
        else if ( m >= 6 && m <= 8 )
        (
            // If date is between June and August inclusive, apply winter theme to ‘body’
            document.body.className = "winter";
        )           
        else if ( m >= 9 && m <= 11 )
        (
            // If date is between September and November inclusive, apply spring theme to ‘body’
            document.body.className = "spring";
        )
        else if( m >= 12 && m <= 2 )
        (
            // All other times apply the 'Summer' theme to 'body'
            document.body.className = "summer";

            if ( m = 12 && n >= 13 && n <= 27 )
            (
                // If date is between 13/12 and 27/12 inclusive, apply Christmas theme to ‘body’
                document.body.className = "xmas";
            )
            else if ( m = 12 && n >= 28 && n <= 31 )
            (
                // If Date is between 28/12 and 31/12 New Year's theme to ‘body’
                document.body.className = "nye";
            )   
            else if ( m = 1 && n >= 1 && n <= 4 )
            (
                // If Date is between 28/12 and 31/12 New Year's theme to ‘body’
                document.body.className = "nye";
            )
        )   
        });

    </script>

这是CSS：

    @charset "UTF-8";
/* CSS Document */

/* Seasonal Backgrounds */
.winter {
    background-image: url(../images/summer.png);
    background-size: cover;
}
.summer {
    background-image: url(../images/winter.png);
    background-size: cover;
}
.autumn {
    background-image: url(../images/autumn.png);
    background-size: cover;
}
.spring {
    background-image: url(../images/spring.png);
    background-size: cover;
}
.xmas {
    background-image: url(../images/christmas2.jpg);
    background-size: cover;
}
.nye {
    background-image: url(../images/nye2.jpg);
    background-size: cover;
}

/*Seasonal H2 */
.winter #mainBody h2 {
    background-image: url(../images/headingorange.png);
    color: #ffffff;
}
.autumn #mainBody h2 {
    background-image: url(../images/headingmagenta.png);
    color: #ffffff;
}
.spring #mainBody h2 {
    background-image: url(../images/headinggreen.png);
    color: #ffffff;
}
.summer #mainBody h2 {
    background-image: url(../images/heading.png);
    color: #ffffff;
}
.xmas #mainBody h2 {
    background-image: url(../images/headingorange.png);
    color: #ffffff;
}
.nye #mainBody h2 {
    background-image: url(../images/headingnye.png);
    color: #ffffff;
}

/* Seasonal Tables */
/* Internet Tables */
.winter #Internet table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL2.png);
    font: 16px "Segoe UI Light";
    width: 125px;
}
.summer  #Internet table tr td {
    background-image: url(../images/Buttons/Metro/BlueL2.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
    border: none;
}
.autumn  #Internet table tr td {
    background-image: url(../images/Buttons/Metro/MagentaL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.spring  #Internet table tr td {
    background-image: url(../images/Buttons/Metro/GreenL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.nye  #Internet table tr td {
    background-image: url(../images/Buttons/Metro/BlueL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.xmas  #Internet table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
/* Intranet Tables */
.winter #Intranet table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL2.png);
    font: 16px "Segoe UI Light";
    width: 125px;
}
.summer  #Intranet table tr td {
    background-image: url(../images/Buttons/Metro/BlueL2.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.autumn  #Intranet table tr td {
    background-image: url(../images/Buttons/Metro/MagentaL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.spring  #Intranet table tr td {
    background-image: url(../images/Buttons/Metro/GreenL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.nye  #Intranet table tr td {
    background-image: url(../images/Buttons/Metro/BlueL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.xmas  #Intranet table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
/* Miscellaneous Tables */
.winter #Misc table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL2.png);
    font: 16px "Segoe UI Light";
    width: 125px;
}
.summer  #Misc table tr td {
    background-image: url(../images/Buttons/Metro/BlueL2.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.autumn  #Misc table tr td {
    background-image: url(../images/Buttons/Metro/MagentaL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.spring  #Misc table tr td {
    background-image: url(../images/Buttons/Metro/GreenL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.nye  #Misc table tr td {
    background-image: url(../images/Buttons/Metro/BlueL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.xmas  #Misc table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
/*Web Apps Tables */
.winter #webApps table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL2.png);
    font: 16px "Segoe UI Light";
    width: 125px;
}
.summer  #webApps table tr td {
    background-image: url(../images/Buttons/Metro/BlueL2.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.autumn  #webApps table tr td {
    background-image: url(../images/Buttons/Metro/MagentaL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.spring  #webApps table tr td {
    background-image: url(../images/Buttons/Metro/GreenL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.nye  #webApps table tr td {
    background-image: url(../images/Buttons/Metro/BlueL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}
.xmas  #webApps table tr td {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    font: 16px  "Segoe UI Light";
    color: #DDDDDD;
    width: 125px;
}

/*Seasonal Footers */
.winter #footer {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    color: #ddd;
}
.summer #footer {
    background-image: url(../images/Buttons/Metro/BlueL1.png);
    color: #ddd;
}
.autumn #footer {
    background-image: url(../images/Buttons/Metro/MagentaL1.png);
    color: #ddd;
}
.spring #footer {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    color: #ddd;
}
.xmas #footer {
    background-image: url(../images/Buttons/Metro/OrangeL1.png);
    color: #ddd;
}
.nye #footer {
    background-image: url(../images/Buttons/Metro/BlueL1.png);
}

/* Seasonal Headers */
.winter #header {
    text-transform: uppercase;
    width: 960px;
    background-color: #001E82;
    color: #D3D3D3;
    background-image: url(../images/headerorange.png);
    background-repeat: no-repeat;
    vertical-align:central;
    height: 69px;
    text-indent:5px;
}
.summer #header {
    text-transform: uppercase;
    width: 960px;
    background-color: #001E82;
    color: #D3D3D3;
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    vertical-align:central;
    height: 69px;
    text-indent:5px;
}
.autumn #header {
    text-transform: uppercase;
    width: 960px;
    background-color: #001E82;
    color: #D3D3D3;
    background-image: url(../images/headermagenta.png);
    background-repeat: no-repeat;
    vertical-align:central;
    height: 69px;
    text-indent:5px;
}
.spring #header {
    text-transform: uppercase;
    width: 960px;
    background-color: #001E82;
    color: #D3D3D3;
    background-image: url(../images/headergreen.png);
    background-repeat: no-repeat;
    vertical-align:central;
    height: 69px;
    text-indent:5px;
}
.nye #header {
    text-transform: uppercase;
    width: 960px;
    background-color: #001E82;
    color: #D3D3D3;
    background-image: url(../images/headernye.png);
    background-repeat: no-repeat;
    vertical-align:central;
    height: 69px;
    text-indent:5px;
}
.xmas #header {
    text-transform: uppercase;
    width: 960px;
    background-color: #001E82;
    color: #D3D3D3;
    background-image: url(../images/headerxmas.png);
    background-repeat: no-repeat;
    vertical-align:central;
    height: 69px;
    text-indent:5px;
}

/* Standard CSS */
#nbnEquipSetup a {
    background-image: url(../images/Buttons/Metro/OrangeL3.png);
    color: #000;
    font-weight: bold;
}
#nbnEquipSetup {
    background-image: url(../images/Buttons/Metro/OrangeL3.png);
    color: #000;
    font-weight: bold;
}

对于冗长的帖子感到抱歉。

3 个答案:

答案 0 :(得分：1)

您可以尝试从

更改“if-else”条件 
if ( m >= 3 && m <= 5 )
(
    /* your code */
)else if(...)
(
    /* your code */
)

到

if ( m >= 3 && m <= 5 )
{
    /* your code */
}else if(...)
{
    /* your code */
}

对于每个'if-elseif'条件，因为它是语法错误。

你需要将month（'m'）变量增加1，因为d.getMonth（）会像这样返回数组索引

var m = d.getMonth() + 1;

在月份情况下，我认为你的情况是错误的

else if( m >= 12 && m <= 2 )

m不能同时高于12且小于2 

else if( m >= 12 || m <= 2 )

希望这可以帮助你：）

答案 1 :(得分：0)

m >= 12 && m <= 2是不可能的。数字不能同时大于11且小于3。也许你的意思是||而不是&&，但考虑到它是你最后的陈述，你根本不需要条件。只需使用else即可。如果语句超过1行，则需要用大括号括起你的语句：

if ( condition ) {
  // 1st line
  // second line
}

答案 2 :(得分：0)

请注意，月份为零索引，因此1月份为0，2月1日等等，因此12月份为11.很容易修复，只需将 getMonth 返回的月份数加1即可。

由于您并不真正需要 else 部分，因此可以大大简化代码。每个 if 返回一个离散值，所以只需使用一系列ifs。此外，可以通过将月份数除以3并使用模数运算符来确定季节：

// Return the southern hemisphere season for a date
// If no date provided, uses current system date
function getSeason(d) {
  d = d || new Date();
  var mon = d.getMonth() + 1;  // Adjust to be indexed from 1
  var day = d.getDate();
  var seasons = ['summer','autumn','winter','spring'];

  // Do silly seasons here
  if (mon == 12) {
    if (day >= 13 && day <= 27) {
      return 'xmas';
    }
    if (day >= 28 && day <= 31) {
      return 'nye';
    }
  }

  // If wasn't a silly season, do others
  mon = Math.floor((mon % 12) / 3);
  return seasons[mon];
}

console.log('Currently it is ' + getSeason()); // Currently it is summer

然后：

$(document).ready(function(){
  document.body.className = getSeason();
});
相关问题
最新问题