我正在开发X-Mas Countdown,我的两个脚本无法一起使用。我找不到错在哪里。我相信有些事情是重复的,但我看不到,希望你们中的一个能抓住。哪个脚本是第二个有效。它不是z-index :(或不应这样),因为它的功能是将文本与倒数计时分开。在删除倒计时代码或排在最前面之前,雪不会出现在画布上。
/* Countdown */
function updateTimer(deadline){
var time = deadline - new Date();
return {
'days': Math.floor( time/(1000*60*60*24) ),
'hours': Math.floor( (time/(1000*60*60)) % 24 ),
'minutes': Math.floor( (time/1000/60) % 60 ),
'seconds': Math.floor( (time/1000) % 60 ),
'total' : time
};
}
function animateClock(span){
span.className = "turn";
setTimeout(function(){
span.className = "";
},700);
}
function startTimer(id, deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//animations
var spans = clock.getElementsByTagName("span");
animateClock(spans[3]);
if(timer.seconds == 59) animateClock(spans[2]);
if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);
//check for end of timer
if(timer.total < 1){
clearInterval(timerInterval);
clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
}
}, 1000);
}
window.onload = function(){
var deadline = new Date("December 25, 2018");
startTimer("clock", deadline);
};
/* Snow */
window.onload = function(){
var canvas = document.getElementById("sky");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var mf = 100;
var flakes = [];
for(var i= 0; i < mf; i++){
flakes.push({
x: Math.random()*W,
y: Math.random()*H,
r: Math.random()*5+2,
d: Math.random()* + 1
})
}
function drawFlakes(){
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "white";
ctx.beginPath();
for(var i = 0; i < mf; i++){
var f = flakes[i];
ctx.moveTo(f.x, f.y);
ctx.arc(f.x, f.y, f.r, 0, Math.PI*2, true);
}
ctx.fill();
moveFlakes();
}
var angle = 0;
function moveFlakes(){
angle += 0.01;
for(var i = 0; i < mf; i++){
var f = flakes[i];
f.y += Math.pow(f.d, 2) + 1;
f.x += Math.sin(angle) * 2;
if(f.y > H){
flakes[i] = {x: Math.random()*W, y: 0, r: f.r, d: f.d};
}
}
}
setInterval(drawFlakes, 25);
}