忆点

「潍坊网站建设」添加一个好看的时间模块
好看又炫酷的时间模块!-忆点技术博客
扫描右侧二维码阅读全文
16
2019/01

「潍坊网站建设」添加一个好看的时间模块

「潍坊网站建设」添加一个好看的时间模块-忆点技术博客

好看又炫酷的时间模块!-忆点技术博客

时间

看到上面的时钟了没,想不想在自己网站上加一个呢?

别着急,博主这就把源码贴在下面!

<canvas id="canvas"  style="width:200px;margin: 50px auto;display:block;">时间</canvas>

<script>
(function() {

    var 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, 1, 0, 0],
            [0, 0, 1, 1, 1, 0, 0],
            [0, 0, 1, 1, 1, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 1, 1, 0, 0],
            [0, 0, 1, 1, 1, 0, 0],
            [0, 0, 1, 1, 1, 0, 0],
            [0, 0, 0, 0, 0, 0, 0]
        ] //:
    ];

    var canvas = document.getElementById('canvas');

    if (canvas.getContext) {
        var cxt = canvas.getContext('2d');
        //声明canvas的宽高
        var H = 100,
            W = 700;
        canvas.height = H;
        canvas.width = W;
        cxt.fillStyle = '#f00';
        cxt.fillRect(10, 10, 50, 50);

        //存储时间数据
        var data = [];
        //存储运动的小球
        var balls = [];
        //设置粒子半径
        var R = canvas.height / 20 - 1;
        (function() {
            var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
            //存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
            data.push(temp[1], temp[2], 10, temp[3], temp[4], 10, temp[5], temp[6]);
        })();

        /*生成点阵数字*/
        function renderDigit(index, 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) {
                        cxt.beginPath();
                        cxt.arc(14 * (R + 2) * index + j * 2 * (R + 1) + (R + 1), i * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI);
                        cxt.closePath();
                        cxt.fill();
                    }
                }
            }
        }

        /*更新时钟*/
        function updateDigitTime() {
            var changeNumArray = [];
            var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
            var NewData = [];
            NewData.push(temp[1], temp[2], 10, temp[3], temp[4], 10, temp[5], temp[6]);
            for (var i = data.length - 1; i >= 0; i--) {
                //时间发生变化 
                if (NewData[i] !== data[i]) {
                    //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                    changeNumArray.push(i + '_' + (Number(data[i]) + 1) % 10);
                }
            }
            //增加小球
            for (var i = 0; i < changeNumArray.length; i++) {
                addBalls.apply(this, changeNumArray[i].split('_'));
            }
            data = NewData.concat();
        }

        /*更新小球状态*/
        function updateBalls() {
            for (var i = 0; i < balls.length; i++) {
                balls[i].stepY += balls[i].disY;
                balls[i].x += balls[i].stepX;
                balls[i].y += balls[i].stepY;
                if (balls[i].x > W + R || balls[i].y > H + R) {
                    balls.splice(i, 1);
                    i--;
                }
            }
        }

        /*增加要运动的小球*/
        function addBalls(index, num) {
            var numArray = [1, 2, 3];
            var colorArray = ["#3BE", "#09C", "#A6C", "#93C", "#9C0", "#690", "#FB3", "#F80", "#F44", "#C00"];
            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 ball = {
                            x: 14 * (R + 2) * index + j * 2 * (R + 1) + (R + 1),
                            y: i * 2 * (R + 1) + (R + 1),
                            stepX: Math.floor(Math.random() * 4 - 2),
                            stepY: -2 * numArray[Math.floor(Math.random() * numArray.length)],
                            color: colorArray[Math.floor(Math.random() * colorArray.length)],
                            disY: 1
                        };
                        balls.push(ball);
                    }
                }
            }
        }

        /*渲染*/
        function render() {
            //重置画布宽度,达到清空画布的效果
            canvas.height = 100;
            //渲染时钟
            for (var i = 0; i < data.length; i++) {
                renderDigit(i, data[i]);
            }
            //渲染小球
            for (var i = 0; i < balls.length; i++) {
                cxt.beginPath();
                cxt.arc(balls[i].x, balls[i].y, R, 0, 2 * Math.PI);
                cxt.fillStyle = balls[i].color;
                cxt.closePath();
                cxt.fill();
            }
        }

        clearInterval(oTimer);
        var oTimer = setInterval(function() {
            //更新时钟
            updateDigitTime();
            //更新小球状态
            updateBalls();
            //渲染
            render();
        }, 50);
    }

})();
</script>

因为博主是用typecho博客中的Markdown编辑器写的,所以直接源码放在文章里就会直接显示了,如果你们不是类似的编辑器,就单独做个页面吧!

博主的站除了沙盒期了,所以最近需要稳定更新文章,可能会出一部分没营养的文章,但也希望大家多多支持!!!


页面关键词:潍坊SEO,潍坊SEO外包,潍坊SEO建站

最后修改:2019 年 02 月 09 日 12 : 47 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论