正如12月那样，我在我改变蓝色背景的时候添加了一个圣诞节背景脚本，将整个十二月（白天和黑夜）的背景设置为圣诞节图片，当其他任何一个月它将会重新变换颜色
我做错了，因为我的代码产生了白色背景，这是我的脚本：
JSfiddle One that's not working
JSfiddle Working background without Christmas effects
那个不起作用的人
<body>
<style>
.one {
-webkit-animation: one 2s 1;
-moz-animation: one 2s 1;
-o-animation: one 2s 1;
animation: one 2s 1;
background-color: #280197;
}
.two {
-webkit-animation: two 2s 1;
-moz-animation: two 2s 1;
-o-animation: two 2s 1;
animation: two 2s 1;
background-color: #501CE3;
}
.three {
-webkit-animation: three 2s 1;
-moz-animation: three 2s 1;
-o-animation: three 2s 1;
animation: three 2s 1;
background-color: #2882F1;
}
.four {
-webkit-animation: four 2s 1;
-moz-animation: four 2s 1;
-o-animation: four 2s 1;
animation: four 2s 1;
background-color: #519BF6;
}
.five {
-webkit-animation: five 2s 1;
-moz-animation: five 2s 1;
-o-animation: five 2s 1;
animation: five 2s 1;
background-color: #69ABFC;
}
.six {
-webkit-animation: six 2s 1;
-moz-animation: six 2s 1;
-o-animation: six 2s 1;
animation: six 2s 1;
background-color: #7BB5FD;
}
.seven {
-webkit-animation: seven 2s 1;
-moz-animation: seven 2s 1;
-o-animation: seven 2s 1;
animation: seven 2s 1;
background-color: #AFD2FE;
}
.eight {
-webkit-animation: eight 2s 1;
-moz-animation: eight 2s 1;
-o-animation: eight 2s 1;
animation: eight 2s 1;
background-color: #AFD2FE;
}
.nine {
-webkit-animation: nine 2s 1;
-moz-animation: nine 2s 1;
-o-animation: nine 2s 1;
animation: nine 2s 1;
background-color: #9DCBFB;
}
.ten {
-webkit-animation: ten 2s 1;
-moz-animation: ten 2s 1;
-o-animation: ten 2s 1;
animation: ten 2s 1;
background-color: #9DCBFB;
}
.eleven {
-webkit-animation: eleven 2s 1;
-moz-animation: eleven 2s 1;
-o-animation: eleven 2s 1;
animation: eleven 2s 1;
background-color: #74B1FE;
}
.twelve {
-webkit-animation: twelve 2s 1;
-moz-animation: twelve 2s 1;
-o-animation: twelve 2s 1;
animation: twelve 2s 1;
background-color: #4899FC;
}
.thirteen {
-webkit-animation: thirteen 2s 1;
-moz-animation: thirteen 2s 1;
-o-animation: thirteen 2s 1;
animation: thirteen 2s 1;
background-color: #4899FC;
}
.fourteen {
-webkit-animation: fourteen 2s 1;
-moz-animation: fourteen 2s 1;
-o-animation: fourteen 2s 1;
animation: fourteen 2s 1;
background-color: #0E75F4;
}
.fifteen {
-webkit-animation: fifteen 2s 1;
-moz-animation: fifteen 2s 1;
-o-animation: fifteen 2s 1;
animation: fifteen 2s 1;
background-color: #0161D8;
}
.sixteen {
-webkit-animation: sixteen 2s 1;
-moz-animation: sixteen 2s 1;
-o-animation: sixteen 2s 1;
animation: sixteen 2s 1;
background-color: #3904CF;
}
.seventeen {
-webkit-animation: seventeen 2s 1;
-moz-animation: seventeen 2s 1;
-o-animation: seventeen 2s 1;
animation: seventeen 2s 1;
background-color: #3404BE;
}
.eighteen {
-webkit-animation: eighteen 2s 1;
-moz-animation: eighteen 2s 1;
-o-animation: eighteen 2s 1;
animation: eighteen 2s 1;
background-color: #2F02B1;
}
.nineteen {
-webkit-animation: nineteen 2s 1;
-moz-animation: nineteen 2s 1;
-o-animation: nineteen 2s 1;
animation: nineteen 2s 1;
background-color: #240385;
}
.twenty {
-webkit-animation: twenty 2s 1;
-moz-animation: twenty 2s 1;
-o-animation: twenty 2s 1;
animation: twenty 2s 1;
background-color: #1A025E;
}
.twentyone {
-webkit-animation: twentyone 2s 1;
-moz-animation: twentyone 2s 1;
-o-animation: twentyone 2s 1;
animation: twentyone 2s 1;
background-color: #000000;
}
@-moz-keyframes one {
from {
background-color: black;
}
to {
background-color: #280197;
}
}
@-moz-keyframes two {
from {
background-color: #280197;
}
to {
background-color: #501CE3;
}
}
@-moz-keyframes three {
from {
background-color: #501CE3;
}
to {
background-color: #2882F1;
}
}
@-moz-keyframes four {
from {
background-color: #2882F1;
}
to {
background-color: #519BF6;
}
}
@-moz-keyframes five {
from {
background-color: #519BF6;
}
to {
background-color: #69ABFC;
}
}
@-moz-keyframes six {
from {
background-color: #69ABFC;
}
to {
background-color: #7BB5FD;
}
}
@-moz-keyframes seven {
from {
background-color: #7BB5FD;
}
to {
background-color: #AFD2FE;
}
}
@-moz-keyframes eight {
from {
background-color: #AFD2FE;
}
to {
background-color: #AFD2FE;
}
}
@-moz-keyframes nine {
from {
background-color: #AFD2FE;
}
to {
background-color: #9DCBFB;
}
}
@-moz-keyframes ten {
from {
background-color: #9DCBFB;
}
to {
background-color: #9DCBFB;
}
}
@-moz-keyframes eleven {
from {
background-color: #9DCBFB;
}
to {
background-color: #74B1FE;
}
}
@-moz-keyframes twelve {
from {
background-color: #74B1FE;
}
to {
background-color: #4899FC;
}
}
@-moz-keyframes thirteen {
from {
background-color: #4899FC;
}
to {
background-color: #4899FC;
}
}
@-moz-keyframes fourteen {
from {
background-color: #4899FC;
}
to {
background-color: #0E75F4;
}
}
@-moz-keyframes fifteen {
from {
background-color: #0E75F4;
}
to {
background-color: #0161D8;
}
}
@-moz-keyframes sixteen {
from {
background-color: #0161D8;
}
to {
background-color: #3904CF;
}
}
@-moz-keyframes seventeen {
from {
background-color: #3904CF;
}
to {
background-color: #3404BE;
}
}
@-moz-keyframes eighteen {
from {
background-color: #3404BE;
}
to {
background-color: #2F02B1;
}
}
@-moz-keyframes nineteen {
from {
background-color: #2F02B1;
}
to {
background-color: #240385;
}
}
@-moz-keyframes twenty {
from {
background-color: #240385;
}
to {
background-color: #1A025E;
}
}
@-moz-keyframes twentyone {
from {
background-color: #1A025E;
}
to {
background-color: #000000;
}
}
@-webkit-keyframes one {
from {
background-color: black;
}
to {
background-color: #280197;
}
}
@-webkit-keyframes two {
from {
background-color: #280197;
}
to {
background-color: #501CE3;
}
}
@-webkit-keyframes three {
from {
background-color: #501CE3;
}
to {
background-color: #2882F1;
}
}
@-webkit-keyframes four {
from {
background-color: #2882F1;
}
to {
background-color: #519BF6;
}
}
@-webkit-keyframes five {
from {
background-color: #519BF6;
}
to {
background-color: #69ABFC;
}
}
@-webkit-keyframes six {
from {
background-color: #69ABFC;
}
to {
background-color: #7BB5FD;
}
}
@-webkit-keyframes seven {
from {
background-color: #7BB5FD;
}
to {
background-color: #AFD2FE;
}
}
@-webkit-keyframes eight {
from {
background-color: #AFD2FE;
}
to {
background-color: #AFD2FE;
}
}
@-webkit-keyframes nine {
from {
background-color: #AFD2FE;
}
to {
background-color: #9DCBFB;
}
}
@-webkit-keyframes ten {
from {
background-color: #9DCBFB;
}
to {
background-color: #9DCBFB;
}
}
@-webkit-keyframes eleven {
from {
background-color: #9DCBFB;
}
to {
background-color: #74B1FE;
}
}
@-webkit-keyframes twelve {
from {
background-color: #74B1FE;
}
to {
background-color: #4899FC;
}
}
@-webkit-keyframes thirteen {
from {
background-color: #4899FC;
}
to {
background-color: #4899FC;
}
}
@-webkit-keyframes fourteen {
from {
background-color: #4899FC;
}
to {
background-color: #0E75F4;
}
}
@-webkit-keyframes fifteen {
from {
background-color: #0E75F4;
}
to {
background-color: #0161D8;
}
}
@-webkit-keyframes sixteen {
from {
background-color: #0161D8;
}
to {
background-color: #3904CF;
}
@-webkit-keyframes seventeen {
from {
background-color: #3904CF;
}
to {
background-color: #3404BE;
}
}
@-webkit-keyframes eighteen {
from {
background-color: #3404BE;
}
to {
background-color: #2F02B1;
}
}
@-webkit-keyframes nineteen {
from {
background-color: #2F02B1;
}
to {
background-color: #240385;
}
}
@-webkit-keyframes twenty {
from {
background-color: #240385;
}
to {
background-color: #1A025E;
}
}
@-webkit-keyframes twentyone {
from {
background-color: #1A025E;
}
to {
background-color: #000000;
}
}
.christmas {
-webkit-animation: christmas 4s 1;
-moz-animation: christmas 4s 1;
-o-animation: christmas 4s 1;
animation: christmas 4s 1;
background-image: url("christmas.png");
background-color: #CD0404;
}
@-webkit-keyframes christmas {
from {
background-color: #FBB0B0;
}
to {
background-image: url("christmas.png");
background-color: #CD0404;
background-size: cover;
}
}
@-moz-keyframes christmas {
from {
background-color: #FBB0B0;
}
to {
background-image: url("christmas.png");
background-color: #CD0404;
background-size: cover;
}
}
</style>
<script>
var b = document.body;
setInterval(function () {
var time = new Date().getHours();
var month = d.getMonth();
var lst = b.classList;
if (month >= 11 && month <= 0) { // If the time is past December but before January
lst.add('christmas')
} else if (time >= 0 && time <= 5) { // If the time is past 12 O'Clock (N) but before 5 O'Clock (Morning)
if (lst.contains('twenty')) {lst.remove('twenty')};
lst.add('one')
} else if (time > 5 && time <= 6) { // If the time is past 5 O'Clock (M) but before 6 O'Clock (Morning)
if (lst.contains('one')) {lst.remove('one')};
lst.add('two')
} else if (time > 6 && time <= 7) { // If the time is past 6 O'Clock (M) but before 7 O'Clock (Morning)
if (lst.contains('two')) {lst.remove('two')};
lst.add('three')
} else if (time > 7 && time <= 8) { // If the time is past 7 O'Clock (M) but before 8 O'Clock (Morning)
if (lst.contains('three')) {lst.remove('three')};
lst.add('four')
} else if (time > 8 && time <= 9) { // If the time is past 8 O'Clock (M) but before 9 O'Clock (Morning)
if (lst.contains('four')) {lst.remove('four')};
lst.add('five')
} else if (time > 9 && time <= 10) { // If the time is past 9 O'Clock (M) but before 10 O'Clock (Morning)
if (lst.contains('five')) {lst.remove('five')};
lst.add('six')
} else if (time > 10 && time <= 11) { // If the time is past 10 O'Clock (M) but before 11 O'Clock (Morning)
if (lst.contains('six')) {lst.remove('six')};
lst.add('seven')
} else if (time > 11 && time <= 12) { // If the time is past 11 O'Clock (M) but before 12 O'Clock (Morning)
if (lst.contains('seven')) {lst.remove('seven')}; //*
lst.add('eight')
} else if (time > 12 && time <= 13) { // If the time is past 12 O'Clock (M) but before 1 O'Clock (Night)
if (lst.contains('eight')) {lst.remove('eight')};
lst.add('nine')
} else if (time > 13 && time <= 14) { // If the time is past 1 O'Clock (N) but before 2 O'Clock (Night)
if (lst.contains('nine')) {lst.remove('nine')};
lst.add('ten')
} else if (time > 14 && time <= 15) { // If the time is past 2 O'Clock (N) but before 3 O'Clock (Night)
if (lst.contains('ten')) {lst.remove('ten')};
lst.add('eleven')
} else if (time > 15 && time <= 16) { // If the time is past 3 O'Clock (N) but before 4 O'Clock (Night)
if (lst.contains('eleven')) {lst.remove('eleven')};
lst.add('twelve')
} else if (time > 16 && time <= 17) { // If the time is past 4 O'Clock (N) but before 5 O'Clock (Night)
if (lst.contains('twelve')) {lst.remove('twelve')};
lst.add('thirteen')
} else if (time > 17 && time <= 18) { // If the time is past 5 O'Clock (N) but before 6 O'Clock (Night)
if (lst.contains('thirteen')) {lst.remove('thirteen')};
lst.add('fourteen')
} else if (time > 18 && time <= 19) { // If the time is past 6 O'Clock (N) but before 7 O'Clock (Night)*
if (lst.contains('fourteen')) {lst.remove('fourteen')};
lst.add('fifteen')
} else if (time > 19 && time <= 20) { // If the time is past 7 O'Clock (N) but before 8 O'Clock (Night)
if (lst.contains('fifteen')) {lst.remove('fifteen')};
lst.add('sixteen')
} else if (time > 20 && time <= 21) { // If the time is past 8 O'Clock (N) but before 9 O'Clock (Night)
if (lst.contains('sixteen')) {lst.remove('sixteen')};
lst.add('seventeen')
} else if (time > 21 && time <= 22) { // If the time is past 9 O'Clock (N) but before 10 O'Clock (Night)
if (lst.contains('seventeen')) {lst.remove('seventeen')};
lst.add('eighteen')
} else if (time > 22 && time <= 23) { // If the time is past 10 O'Clock (N) but before 11 O'Clock (Night)
if (lst.contains('eighteen')) {lst.remove('eighteen')};
lst.add('nineteen')
} else if (time > 23 && time <= 24) { // If the time is past 11 O'Clock (N) but before 12 O'Clock (Night)
if (lst.contains('nineteen')) {lst.remove('nineteen')};
lst.add('twenty')
} else if (time > 24 && time <= 1) { // If the time is past 12 O'Clock (N) but before 1 O'Clock (Morning)*
if (lst.contains('twenty')) {lst.remove('twenty')};
lst.add('twentyone')
}
}, 1000);
</script>
<script>
var month = d.getMonth();
</script>
答案 0 :(得分：1)
编辑回答：
如果你可以选择11.和12.月，if (month >= 11)就够了。你现在不能看到你的代码是这样的，因为我们现在不是12月。
如果您想检查代码，可以输入以下代码：if (month >= 9)它的工作。
此外，您的月份变量未定义，工作版本在此处：
更新： 的 DEMO
答案 1 :(得分：0)
d未在您的函数中定义（请参阅代码段），因此我认为这会为您修复它（fiddle）
setInterval(function () {
var time = new Date().getHours();
// var month = d.getMonth(); d is not defined!
var month = new Date().getMonth();
var lst = b.classList;
if (month >= 11 && month <= 0) { // If the time is past December but before January
lst.add('christmas')
请注意，逻辑上不可能大于11且小于0
答案 2 :(得分：0)
这是最终代码（添加了雪花）： JSfiddle
<body>
<link rel="stylesheet" href="http://sd-storage.weebly.com/files/theme/skycss.css">
<script>
var b = document.body;
setInterval(function () {
var time = new Date().getHours();
var month = new Date().getMonth();
var lst = b.classList;
if (month >= 11) { // If the date is past December
document.body.style.backgroundImage = "url('http://sd-storage.weebly.com/files/theme/christmas.png')";
document.body.style.backgroundSize = "cover";
var snowsrc="http://sd-storage.weebly.com/files/theme/snow.gif"
var no = 10;
var hidesnowtime = 0;
var snowdistance = "pageheight";
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("http://sd-storage.weebly.com")!=-1)? "http://sd-storage.weebly.com/files/theme/snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
} else if (time >= 0 && time <= 5) { // If the time is past 12 O'Clock (N) but before 5 O'Clock (Morning)
if (lst.contains('twenty')) {lst.remove('twenty')};
lst.add('one')
} else if (time > 5 && time <= 6) { // If the time is past 5 O'Clock (M) but before 6 O'Clock (Morning)
if (lst.contains('one')) {lst.remove('one')};
lst.add('two')
} else if (time > 6 && time <= 7) { // If the time is past 6 O'Clock (M) but before 7 O'Clock (Morning)
if (lst.contains('two')) {lst.remove('two')};
lst.add('three')
} else if (time > 7 && time <= 8) { // If the time is past 7 O'Clock (M) but before 8 O'Clock (Morning)
if (lst.contains('three')) {lst.remove('three')};
lst.add('four')
} else if (time > 8 && time <= 9) { // If the time is past 8 O'Clock (M) but before 9 O'Clock (Morning)
if (lst.contains('four')) {lst.remove('four')};
lst.add('five')
} else if (time > 9 && time <= 10) { // If the time is past 9 O'Clock (M) but before 10 O'Clock (Morning)
if (lst.contains('five')) {lst.remove('five')};
lst.add('six')
} else if (time > 10 && time <= 11) { // If the time is past 10 O'Clock (M) but before 11 O'Clock (Morning)
if (lst.contains('six')) {lst.remove('six')};
lst.add('seven')
} else if (time > 11 && time <= 12) { // If the time is past 11 O'Clock (M) but before 12 O'Clock (Morning)
if (lst.contains('seven')) {lst.remove('seven')}; //*
lst.add('eight')
} else if (time > 12 && time <= 13) { // If the time is past 12 O'Clock (M) but before 1 O'Clock (Night)
if (lst.contains('eight')) {lst.remove('eight')};
lst.add('nine')
} else if (time > 13 && time <= 14) { // If the time is past 1 O'Clock (N) but before 2 O'Clock (Night)
if (lst.contains('nine')) {lst.remove('nine')};
lst.add('ten')
} else if (time > 14 && time <= 15) { // If the time is past 2 O'Clock (N) but before 3 O'Clock (Night)
if (lst.contains('ten')) {lst.remove('ten')};
lst.add('eleven')
} else if (time > 15 && time <= 16) { // If the time is past 3 O'Clock (N) but before 4 O'Clock (Night)
if (lst.contains('eleven')) {lst.remove('eleven')};
lst.add('twelve')
} else if (time > 16 && time <= 17) { // If the time is past 4 O'Clock (N) but before 5 O'Clock (Night)
if (lst.contains('twelve')) {lst.remove('twelve')};
lst.add('thirteen')
} else if (time > 17 && time <= 18) { // If the time is past 5 O'Clock (N) but before 6 O'Clock (Night)
if (lst.contains('thirteen')) {lst.remove('thirteen')};
lst.add('fourteen')
} else if (time > 18 && time <= 19) { // If the time is past 6 O'Clock (N) but before 7 O'Clock (Night)*
if (lst.contains('fourteen')) {lst.remove('fourteen')};
lst.add('fifteen')
} else if (time > 19 && time <= 20) { // If the time is past 7 O'Clock (N) but before 8 O'Clock (Night)
if (lst.contains('fifteen')) {lst.remove('fifteen')};
lst.add('sixteen')
} else if (time > 20 && time <= 21) { // If the time is past 8 O'Clock (N) but before 9 O'Clock (Night)
if (lst.contains('sixteen')) {lst.remove('sixteen')};
lst.add('seventeen')
} else if (time > 21 && time <= 22) { // If the time is past 9 O'Clock (N) but before 10 O'Clock (Night)
if (lst.contains('seventeen')) {lst.remove('seventeen')};
lst.add('eighteen')
} else if (time > 22 && time <= 23) { // If the time is past 10 O'Clock (N) but before 11 O'Clock (Night)
if (lst.contains('eighteen')) {lst.remove('eighteen')};
lst.add('nineteen')
} else if (time > 23 && time <= 24) { // If the time is past 11 O'Clock (N) but before 12 O'Clock (Night)
if (lst.contains('nineteen')) {lst.remove('nineteen')};
lst.add('twenty')
} else if (time > 24 && time <= 1) { // If the time is past 12 O'Clock (N) but before 1 O'Clock (Morning)*
if (lst.contains('twenty')) {lst.remove('twenty')};
lst.add('twentyone')
}
}, 1000);
</script>