如何使用 JavaScript 根据季节更改 CSS
How to change CSS based on Season using JavaScript
如果这是一个简单的问题，我很抱歉，但我需要这方面的帮助。我正在尝试创建一个 'Dynamic' 页面，该页面将随着每个季节（基于南半球季节）改变页面/网站的外观。我在 CSS 中设置了颜色、Headers、图像和背景，我想在夏季、冬季、秋季和 Spring 中更改它们，以及针对特定日期的圣诞节和新年。我已经包括了我页面中的 in-line 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;
}
抱歉冗长post。
m >= 12 && m <= 2是不可能的。一个数字不能同时大于 11 和小于 3。也许您的意思是 || 而不是 &&，但考虑到这是您的最后一个陈述，您根本不需要条件。只需使用 else。如果语句超过 1 行，则需要用花括号将它们括起来：
if ( condition ) {
// 1st line
// second line
}
你能尝试改变你的'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() returns 数组索引像这样
var m = d.getMonth() + 1;
而且在月份条件下，我认为你的条件是错误的
else if( m >= 12 && m <= 2 )
m不能同时大于12又小于2所以
else if( m >= 12 || m <= 2 )
希望对您有所帮助:)
请注意，月份是零索引的，所以一月是 0，二月是 1 等等，所以十二月是 11。很容易解决，只需在 getMonth[=21= 返回的月份数字上加 1 ].
代码可以大大简化，因为您实际上并不需要 else 部分。每个 if returns 一个离散值，因此只需使用一系列 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();
});
如果这是一个简单的问题，我很抱歉，但我需要这方面的帮助。我正在尝试创建一个 'Dynamic' 页面，该页面将随着每个季节（基于南半球季节）改变页面/网站的外观。我在 CSS 中设置了颜色、Headers、图像和背景，我想在夏季、冬季、秋季和 Spring 中更改它们，以及针对特定日期的圣诞节和新年。我已经包括了我页面中的 in-line 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;
}
抱歉冗长post。
m >= 12 && m <= 2是不可能的。一个数字不能同时大于 11 和小于 3。也许您的意思是 || 而不是 &&，但考虑到这是您的最后一个陈述，您根本不需要条件。只需使用 else。如果语句超过 1 行，则需要用花括号将它们括起来：
if ( condition ) {
// 1st line
// second line
}
你能尝试改变你的'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() returns 数组索引像这样
var m = d.getMonth() + 1;
而且在月份条件下，我认为你的条件是错误的
else if( m >= 12 && m <= 2 )
m不能同时大于12又小于2所以
else if( m >= 12 || m <= 2 )
希望对您有所帮助:)
请注意，月份是零索引的，所以一月是 0，二月是 1 等等，所以十二月是 11。很容易解决，只需在 getMonth[=21= 返回的月份数字上加 1 ].
代码可以大大简化，因为您实际上并不需要 else 部分。每个 if returns 一个离散值，因此只需使用一系列 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();
});