炫酷的倒计时效果

一、基本概要

你需要有以下基础：

• HTML Canvas基本绘图能力
• JavaScript基础

你将学到以下内容：

• 用setinterval()方法制作动画
• 利用数字点阵绘图

二、代码详解

1.主要结构目录

|---countDown
     |---index.html
     |---digit.js//存放数字点阵
     |---countdown.js

这里的index.html和digit.js就不仔细介绍了，重点讲countdown.js。

2.setInterval()方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

// 动画方法
setInterval(
     function() {
        render(context);//时钟的绘制
        update();//更新
     },
     50//50ms
);

3.render()方法

function render(cxt) {
    
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
    var hour = parseInt(curShowTimeSeconds/3600);
    var minute = parseInt(curShowTimeSeconds%3600/60);
    var second = parseInt(curShowTimeSeconds%60);

    renderDigit(MARGIN_LEFT, MARGIN_TOP + 10, parseInt(hour/10), cxt);
    renderDigit(MARGIN_LEFT + 15*(R+1), MARGIN_TOP + 10, parseInt(hour%10), cxt);
    renderDigit(MARGIN_LEFT + 30*(R+1), MARGIN_TOP + 10, 10, cxt);
    renderDigit(MARGIN_LEFT + 39*(R+1), MARGIN_TOP + 10, parseInt(minute/10), cxt);
    renderDigit(MARGIN_LEFT + 54*(R+1), MARGIN_TOP + 10, parseInt(minute%10), cxt);
    renderDigit(MARGIN_LEFT + 69*(R+1), MARGIN_TOP + 10, 10, cxt);
    renderDigit(MARGIN_LEFT + 78*(R+1), MARGIN_TOP + 10, parseInt(second/10), cxt);
    renderDigit(MARGIN_LEFT + 93*(R+1), MARGIN_TOP + 10, parseInt(second%10), cxt);
    //跳出的小球
    for(var i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color;
        cxt.beginPath();
        cxt.arc(balls[i].x, balls[i].y, R, 0, 2*Math.PI);
        cxt.closePath();
        cxt.fill();
    }
}

renderDigit(距离左边界,距离上边界,该位置的数字,context);
至于15*(R + 1),30,39...这些数字都是算出来的比较合适的位置，每个数字占了7*10个小格子，为了数字中的一个个小点不粘连在一起，把每个小格子的边长计为2*(R+1)，又为了使每个数字不粘连在一起，数字之间的空格宽(R+1)；当中还有“：”占了4*10，那就另当别论，相信你们都懂得。
下面就是renderDigit()方法

function renderDigit(x, y, num, cxt) {

    cxt.fillStyle = "#a3de83";

    for(var i = 0; i < digit[num].length; i++) {
        for(var j = 0; j < digit[num][i].length; j++) {
            if(digit[num][i][j] == 1) { //说明该位置要绘制小圆点
                cxt.beginPath();
                cxt.arc(x+(2*j+1)*(R+1), y+(2*i+1)*(R+1), R, 0, 2*Math.PI);
                cxt.closePath();                
                cxt.fill();
            }
        }
    }   
}

4.update()方法

function update() {
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    var nextHours = parseInt(nextShowTimeSeconds/3600);
    var nextMinutes = parseInt(nextShowTimeSeconds%3600/60);
    var nextSeconds = parseInt(nextShowTimeSeconds%60);

    var curHours = parseInt(curShowTimeSeconds/3600);
    var curMinutes = parseInt(curShowTimeSeconds%3600/60);
    var curSeconds = parseInt(curShowTimeSeconds%60);

    if(nextSeconds != curSeconds) {
        if(parseInt(nextHours/10) != parseInt(curHours/10)) {
            addBalls(MARGIN_LEFT, MARGIN_TOP,parseInt(curHours/10));
        }
        if(parseInt(nextHours%10) != parseInt(curHours%10)) {
            addBalls(MARGIN_LEFT + 15*(R+1), MARGIN_TOP,parseInt(curHours%10));
        }
        if(parseInt(nextMinutes/10) != parseInt(curMinutes/10)) {
            addBalls(MARGIN_LEFT + 39*(R+1), MARGIN_TOP, parseInt(curMinutes/10));
        }
        if(parseInt(nextMinutes%10) != parseInt(curMinutes%10)) {
            addBalls(MARGIN_LEFT + 54*(R+1), MARGIN_TOP, parseInt(curMinutes%10));
        }
        if(parseInt(nextSeconds/10) != parseInt(curSeconds/10)) {
            addBalls(MARGIN_LEFT + 78*(R+1), MARGIN_TOP, parseInt(curSeconds/10));
        }
        if(parseInt(nextSeconds%10) != parseInt(curSeconds%10)) {
            addBalls(MARGIN_LEFT + 93*(R+1), MARGIN_TOP, parseInt(curSeconds%10));
        }
        curShowTimeSeconds = nextShowTimeSeconds;
    }
    updateBalls();
    //console.log(balls.length);
}

update()实现动画，通过比较时间的不同来改变显示的倒计时的时间。其中

curShowTimeSeconds = nextShowTimeSeconds;

改变了全局变量，于是显示的时间发生变化。
addBalls(距离左边界，距离上边界，改变前的数字)

function addBalls(x, y, num) {
    for(var i = 0; i < digit[num].length; i++) {
        for(var j = 0; j < digit[num][i].length; j++) {
            if(digit[num][i][j] == 1) {
                var aBall = {
                    x:x+(2*j+1)*(R+1),
                    y:y+(2*i+1)*(R+1),
                    g:1.5+Math.random(),//y轴方向加速度
                    vx:Math.pow(-1, Math.ceil(Math.random()*1000))*4,//x轴方向速度
                    vy:-5,//y轴方向速度
                    color:ballColor[Math.floor(Math.random()*ballColor.length)]//随机颜色
                };
                balls.push(aBall);//存进aBall[]数组
            }
        }
    }
}

用该方法得到当前的倒计时时间

function getCurrentShowTimeSeconds() {
    var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();//ms
    ret = Math.round(ret/1000);//转换整数

    return ret >= 0 ? ret : 0;
}

5.updateBalls()方法

function updateBalls() {
    for( var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;
        //碰到下边界弹起
        if(balls[i].y >= WINDOW_HEIGHT - R) {
            balls[i].y = WINDOW_HEIGHT - R;
            balls[i].vy = -balls[i].vy * 0.75;
        }
    }
    //为了控制小球数量
    var cnt = 0;
    for(var i = 0; i < balls.length; i++) {
        if(balls[i].x + R > 0 && balls[i].x - R < WINDOW_WIDTH) {
            balls[cnt++] = balls[i];
        }
    }
    while(balls.length > cnt) {
        balls.pop();
    }
}

这一方法使每个小球随机地运动起来。

三、效果

学习来自--慕课网-炫丽的倒计时效果Canvas绘图与动画基础