Aixj


愿世界安康,愿你我皆好!

进入博客 >

Aixj

Aixj

愿世界安康,愿你我皆好!
  • 文章 16篇
  • 吐槽 19条
  • 分类 2个
  • 标签 26个
2021-10-28
275 ℃
已收录

粒子时钟

本文最后更新于2021年10月28日,已超过240天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
<div style="">
    <canvas id="canvas" style="width:60%;" width="700" height="100">当前浏览器不支持canvas,请更换浏览器后再试</canvas>
</div>
<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>

标签: 粒子时钟

6

- THE END -

非特殊说明,本文版权属于 admin

本文采用《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

上一篇: 好久不见

暂无评论 >_<