【动画】js+canvas前端开发的动画实例_倒计时

页面倒计时后台开发好还是前端开发好?|vscode前端开发实例|微信开发前端动画

html 代码

<!DOCTYPE html>
<html style=”height:100%”>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>h5页面前端开发:倒计时</title>
    <style>
        body {
            overflow: hidden;
        }
    </style>
</head>
<body style=”height:100%”>
    <canvas id=”canvas” style=”height:100%”>
        当前浏览器不支持Canvas,请更换浏览器后再试
    </canvas>
    <script>
        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, 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]
            ], //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]
            ], //2
            [
                [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]
            ], //3
            [
                [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]
            ], //4
            [
                [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]
            ], //5
            [
                [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]
            ], //6
            [
                [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]
            ], //7
            [
                [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]
            ], //8
            [
                [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]
            ], //9
            [
                [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]
            ] //:
        ];
    </script>
    <script>
        var WINDOW_WIDTH = 1024;
        var WINDOW_HEIGHT = 768;
        var RADIUS = 8;
        var MARGIN_TOP = 60;
        var MARGIN_LEFT = 30;
        var now = new Date(); //当前时间
        const endTime = new Date().getTime() + 500000; //设置结束时间,目前不能超过24小时
        //const endTime = new Date(2016,12,31,23,59,59).getTime();
        console.log(endTime);
        //endTime.setTime( endTime.getTime() + 3600*1000 )
        var curShowTimeSeconds = 0
        var balls = [];
        const colors = [“#33B5E5”, “#0099CC”, “#AA66CC”, “#9933CC”, “#99CC00”, “#669900”, “#FFBB33”, “#FF8800”, “#FF4444”,
            “#CC0000”
        ]
        window.onload = function () {
            WINDOW_WIDTH = document.documentElement.clientWidth
            WINDOW_HEIGHT = document.documentElement.clientHeight
            MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
            RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108) – 1
            MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
            var canvas = document.getElementById(‘canvas’);
            var context = canvas.getContext(“2d”);
            canvas.width = WINDOW_WIDTH;
            canvas.height = WINDOW_HEIGHT;
            curShowTimeSeconds = getCurrentShowTimeSeconds();
            //console.log(curShowTimeSeconds);
            var timer = setInterval(
                function () {
                    render(context);
                    update();
                },
                50
            );
        }
        function getCurrentShowTimeSeconds() {
            var curTime = new Date();
            //console.log(curTime)
            var ret = endTime – curTime;
            ret = Math.round(ret / 1000)
            return ret >= 0 ? ret : 0;
        }
        function update() {
            var nextShowTimeSeconds = getCurrentShowTimeSeconds();
            var nextHours = parseInt(nextShowTimeSeconds / 3600);
            var nextMinutes = parseInt((nextShowTimeSeconds – nextHours * 3600) / 60)
            var nextSeconds = nextShowTimeSeconds % 60
            var curHours = parseInt(curShowTimeSeconds / 3600);
            var curMinutes = parseInt((curShowTimeSeconds – curHours * 3600) / 60)
            var curSeconds = curShowTimeSeconds % 60
            if (nextSeconds != curSeconds) {
                if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
                    addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours / 10));
                }
                if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
                    addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));
                }
                if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
                    addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));
                }
                if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
                    addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));
                }
                if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
                    addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));
                }
                if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
                    addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds % 10));
                }
                curShowTimeSeconds = nextShowTimeSeconds;
                //console.log(curShowTimeSeconds);
            }
            updateBalls();
            //console.log(balls.length)
        }
        function updateBalls() {
            for (var i = 0; i < balls.length; i++) {
                balls[i].x += balls[i].vx;
                var c = 1.0;
                if (balls[i].y + RADIUS + balls[i].vy >= WINDOW_HEIGHT) {
                    c = (WINDOW_HEIGHT – (balls[i].y + RADIUS)) / balls[i].vy;
                    //console.log( c );
                }
                balls[i].y += balls[i].vy;
                balls[i].vy += c * balls[i].g;;
                if (balls[i].y >= WINDOW_HEIGHT – RADIUS) {
                    balls[i].y = WINDOW_HEIGHT – RADIUS;
                    balls[i].vy = -Math.abs(balls[i].vy) * 0.75;
                }
            }
            var cnt = 0
            for (var i = 0; i < balls.length; i++)
                if (balls[i].x + RADIUS > 0 && balls[i].x – RADIUS < WINDOW_WIDTH)
                    balls[cnt++] = balls[i]
            while (balls.length > /* Math.min(300,cnt) */ cnt) {
                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 * (RADIUS + 1) + (RADIUS + 1),
                            y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
                            g: 1.5 + Math.random(),
                            vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
                            vy: -5,
                            color: colors[Math.floor(Math.random() * colors.length)]
                        }
                        balls.push(aBall)
                    }
        }
        function render(cxt) {
            cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
            var hours = parseInt(curShowTimeSeconds / 3600);
            var minutes = parseInt((curShowTimeSeconds – hours * 3600) / 60)
            var seconds = curShowTimeSeconds % 60
            renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
            renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
            renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
            renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
            renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
            renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
            renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
            renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 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, RADIUS, 0, 2 * Math.PI, true);
                cxt.closePath();
                cxt.fill();
            }
        }
        function renderDigit(x, y, num, cxt) {
            cxt.fillStyle = “#008ad4”;
            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 + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
                        cxt.closePath()
                        cxt.fill()
                    }
        }
    </script>
</body>
</html>

h5动画制作 web前端开发|前端开发体系书籍推荐|公司前端开发用什么软件?

» 本文来自:前端开发者 » 《【动画】js+canvas前端开发的动画实例_倒计时》
» 本文链接地址:https://www.rokub.com/3830.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!