Javascript学习--时间

digit =
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//
        [
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0],
            [0,1,1,0],
            [0,1,1,0],
            [0,0,0,0],
            [0,0,0,0]
        ]//:
    ];

var canvasWidth = document.documentElement.clientWidth - 20,
    canvasHeight = document.documentElement.clientHeight - 20,
    r = Math.round(canvasWidth * (4 / 5) / 108) - 1,
    marginTop = Math.round(canvasHeight / 5),
    marginLeft = Math.round(canvasWidth / 10);

var curtimeSeconds = getcurtimeSeconds();
var balls = [];
var colors = ['#33b5be', '#0099cc', '#aa66cc', '#9933cc', '#99cc00', '#669900', '#ffbb33', '#ff8800', '#ff4444', '#cc0000'];
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//获取截止时间与当前时间的秒数
function getcurtimeSeconds() {
    var curTime = new Date();
    //时钟
    var betweenTime = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
    return betweenTime;
}

function renderDigit(x, y, num, ctx) {
    ctx.fillStyle = 'orange';
    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) {
                ctx.beginPath();
                ctx.arc(x + j * 2 * (r + 1) + (r + 1), y + i * 2 * (r + 1) + (r + 1), r, 0, 2 * Math.PI);
                ctx.fill();
            }
        }
    }
}

function renderM(ctx) {
    renderDigit(marginLeft + 30 * (r + 1), marginTop, 10, ctx);
    renderDigit(marginLeft + 69 * (r + 1), marginTop, 10, ctx);
}
//闪烁的冒号
function bilibili(ctx) {
    var nowTime = new Date();
    var nowString = nowTime.getTime().toString();
    var cutTime = nowString.substr(-4);
    var nowSeconds = parseInt(cutTime);
//    console.log(nowSeconds);
    if(Math.round(nowSeconds / 1000) === Math.floor(nowSeconds / 1000)) {
        renderM(ctx);
    }
}

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 >= canvasHeight - r) {
            balls[i].y = canvasHeight - r;
            balls[i].vy = -balls[i].vy * 0.8;

        }
    }
    //删除画布外的球，提高性能
    var count = 0;
    for(var i = 0; i < balls.length; i++) {
        if(balls[i].x + r > 0 && balls[i].x - r < canvasWidth) {
            balls[count++] = balls[i];
        }
    }
    while(balls.length > count) {
        balls.pop();
    }
}

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 + j * 2 * (r + 1) + (r + 1),
                    y: y + i * 2 * (r + 1) + (r + 1),
                    g: 1.5 + Math.random(), //重力加速度
                    vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 3,
                    vy: -5,
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(aBall);
            }
        }
    }
}

function render(ctx) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    var hours = parseInt(curtimeSeconds / 3600),
        minutes = parseInt((curtimeSeconds - hours * 3600) / 60),
        seconds = curtimeSeconds % 60;
    renderDigit(marginLeft, marginTop, parseInt(hours / 10), ctx);
    renderDigit(marginLeft + 15 * (r + 1), marginTop, parseInt(hours % 10), ctx);

    renderDigit(marginLeft + 39 * (r + 1), marginTop, parseInt(minutes / 10), ctx);
    renderDigit(marginLeft + 54 * (r + 1), marginTop, parseInt(minutes % 10), ctx);

    renderDigit(marginLeft + 78 * (r + 1), marginTop, parseInt(seconds / 10), ctx);
    renderDigit(marginLeft + 93 * (r + 1), marginTop, parseInt(seconds % 10), ctx);

    //绘制掉落的小球
    for(var i = 0; i < balls.length; i++) {
        ctx.fillStyle = balls[i].color;
        ctx.beginPath();
        ctx.arc(balls[i].x, balls[i].y, r, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
    }
}
//更新时间，为小球掉落运动做准备
function update() {
    var nexttimeSeconds = getcurtimeSeconds();
    var nextHours = parseInt(nexttimeSeconds / 3600),
        nextMinutes = parseInt((nexttimeSeconds - nextHours * 3600) / 60),
        nextSeconds = nexttimeSeconds % 60;
    var curHours = parseInt(curtimeSeconds / 3600),
        curMinutes = parseInt((curtimeSeconds - curHours * 3600) / 60),
        curSeconds = curtimeSeconds % 60;

    if(nextSeconds != curSeconds) {
        //小时
        if(parseInt(curHours / 10) != parseInt(nextHours / 10)) {
            addBalls(marginLeft, marginTop, parseInt(curHours / 10));
        }
        if(parseInt(curHours % 10) != parseInt(nextHours % 10)) {
            addBalls(marginLeft + 15 * (r + 1), marginTop, parseInt(curHours / 10));
        }
        //分
        if(parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
            addBalls(marginLeft + 39 * (r + 1), marginTop, parseInt(curMinutes % 10));
        }
        if(parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
            addBalls(marginLeft + 54 * (r + 1), marginTop, parseInt(curMinutes % 10));
        }
        //秒
        if(parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
            addBalls(marginLeft + 78 * (r + 1), marginTop, parseInt(curSeconds / 10));
        }
        if(parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
            addBalls(marginLeft + 93 * (r + 1), marginTop, parseInt(curSeconds % 10));
        }

        //如果时间变化，那么改变时间
        curtimeSeconds = nexttimeSeconds;
    }
    updateBalls();
}

setInterval(function() {
    render(context);
    update();
    bilibili(context);
}, 50);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>倒计时</title>
    </head>
    <body>
        <canvas id="canvas" style="height: 100%;width: 100%;"></canvas>
        <script type="text/javascript" src="js/digit.js" ></script>
        <script type="text/javascript" src="js/countdown.js" ></script>
    </body>
</html>