两个Javascript脚本无法一起运行(Snow.js和Countdown.js)

时间:2018-10-28 01:43:59

标签: javascript html

我正在开发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);
}

0 个答案:

没有答案