粒子时钟

最新推荐文章于 2024-04-03 09:48:24 发布
最新推荐文章于 2024-04-03 09:48:24 发布
阅读量215 收藏
点赞数
分类专栏： 搞毕设过程的小记录 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42411307/article/details/111592276
版权

粒子时钟

本人比较喜欢加一点花里胡哨的东西…记录一下…

给HTML页面添加一个粒子时钟

  1. 在页面加入JS
<script>
    (function(){
    var WINDOW_WIDTH = 820;
    var WINDOW_HEIGHT = 250;
    var RADIUS = 7; //球半径
    var NUMBER_GAP = 10; //数字之间的间隙
    var u=0.65; //碰撞能量损耗系数
    var context; //Canvas绘制上下文
    var balls = []; //存储彩色的小球
    const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
    var currentNums = []; //屏幕显示的8个字符
    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,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]
            ]//:
        ];

    function drawDatetime(cxt){
        var nums = [];

        context.fillStyle="#005eac"
        var date = new Date();
        var offsetX = 70, offsetY = 30;
        var hours = date.getHours();
        var num1 = Math.floor(hours/10);
        var num2 = hours%10;
        nums.push({num: num1});
        nums.push({num: num2});
        nums.push({num: 10}); //冒号
        var minutes = date.getMinutes();
        var num1 = Math.floor(minutes/10);
        var num2 = minutes%10;
        nums.push({num: num1});
        nums.push({num: num2});
        nums.push({num: 10}); //冒号
        var seconds = date.getSeconds();
        var num1 = Math.floor(seconds/10);
        var num2 = seconds%10;
        nums.push({num: num1});
        nums.push({num: num2});

        for(var x = 0;x<nums.length;x++){
            nums[x].offsetX = offsetX;
            offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
            //两个数字连一块，应该间隔一些距离
            if(x<nums.length-1){
                if((nums[x].num!=10) &&(nums[x+1].num!=10)){
                    offsetX+=NUMBER_GAP;
                }
            }
        }

        //说明这是初始化
        if(currentNums.length ==0){
            currentNums = nums;
        }else{
            //进行比较
            for(var index = 0;index<currentNums.length;index++){
                if(currentNums[index].num!=nums[index].num){
                    //不一样时，添加彩色小球
                    addBalls(nums[index]);
                    currentNums[index].num=nums[index].num;
                }
            }
        }
        renderBalls(cxt);
        updateBalls();

        return date;
    }

    function addBalls (item) {
        var num = item.num;
        var numMatrix = digit[num];
        for(var y = 0;y<numMatrix.length;y++){
            for(var x = 0;x<numMatrix[y].length;x++){
                if(numMatrix[y][x]==1){
                    var ball={
                        offsetX:item.offsetX+RADIUS+RADIUS*2*x,
                        offsetY:30+RADIUS+RADIUS*2*y,
                        color:colors[Math.floor(Math.random()*colors.length)],
                        g:1.5+Math.random(),
                        vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
                        vy:-5
                    }
                    balls.push(ball);
                }
            }
        }
    }

    function renderBalls(cxt){
        for(var index = 0;index<balls.length;index++){
            cxt.beginPath();
            cxt.fillStyle=balls[index].color;
            cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
            cxt.fill();
        }
    }

    function updateBalls () {
        var i =0;
        for(var index = 0;index<balls.length;index++){
            var ball = balls[index];
            ball.offsetX += ball.vx;
            ball.offsetY += ball.vy;
            ball.vy+=ball.g;
            if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
                ball.offsetY= WINDOW_HEIGHT-RADIUS;
                ball.vy=-ball.vy*u;
            }
            if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){

                balls[i]=balls[index];
                i++;
            }
        }
        //去除出边界的球
        for(;i<balls.length;i++){
            balls.pop();
        }
    }
    function drawSingleNumber(offsetX, offsetY, num, cxt){
        var numMatrix = digit[num];
        for(var y = 0;y<numMatrix.length;y++){
            for(var x = 0;x<numMatrix[y].length;x++){
                if(numMatrix[y][x]==1){
                    cxt.beginPath();
                    cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
                    cxt.fill();
                }
            }
        }
        cxt.beginPath();
        offsetX += numMatrix[0].length*RADIUS*2;
        return offsetX;
    }

    var canvas = document.getElementById("canvas");
    canvas.width=WINDOW_WIDTH;
    canvas.height=WINDOW_HEIGHT;
    context = canvas.getContext("2d");

    //记录当前绘制的时刻
    var currentDate = new Date();

    setInterval(function(){
        //清空整个Canvas，重新绘制内容
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        drawDatetime(context);
    }, 50)
})();

</script>

使用

<div id="">
    <canvas id="canvas" style="width:30%;"></canvas>
</div>

效果

image-20201223155936677

阿灰丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html粒子时钟
07-31
动态改变时间，掉落小球。
html5里的canvas
qq_36407090的博客
02-27 259
canvas var cas = document.getElementById("canvas"); var ctx = cas.getContext("2d"); //画圆 //ctx.arc(100,100,14,Math.PI*2,0,false); //ctx.fillStyle = "green"; //ctx.fill();
Canvas--粒子时钟
zelentre的博客
02-08 337
digit.js 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,...
原生js粒子时钟
06-06 705
原生js粒子时钟              html,body {margin:0; padding:0; position:absolute; width:100%; height:100%; overflow: hidden} #screen {width:80%; height:50%; background:#b6b6b6; position
基于canvas的粒子时钟 --- js特效
bash_winner的博客
02-16 410
前言：写在前面的话 什么是粒子时钟，听上去好高尚的样子。☺。起始也就那样。话不多说，先来张效果图。 感觉是不是还行，怎样做的呢，其实也很简单。再来一张图。 看了这个图片，是不是大致懂了，这个效果是怎么来的，其实说起来有点像，计算机的成像了。你所看到的图片，各种形状，其实都是一个一个像素点组成的。这里的数字也是用的这种方法，实现的。将画出一个数字，转变为画每一个像素点。这也用到了数学建模的思想。...
HTML5 SVG多边形粒子时钟动画特效
06-24
为了创建粒子时钟，首先需要定义一个SVG画布，然后在其中绘制出粒子。可以使用CSS动画来控制粒子的运动，比如让它们以某种规律移动，以模拟时钟指针的旋转。此外，JavaScript可以用来实时更新粒子的位置，以反映当前...
易语言粒子时钟
07-17
"易语言粒子时钟"是一个基于易语言编程的项目，主要功能是实现一种独特的时钟显示方式，通过粒子效果来展示时间。在这个项目中，开发者使用了特定的技术和函数来达到这一目标。以下是对这个项目中涉及的关键知识点的...
使用processing实现粒子时钟动态效果
04-15
在本项目中，“使用processing实现粒子时钟动态效果”是一个典型的结合编程与艺术的实践，它利用Processing强大的图形渲染能力来创建一个动态的、基于粒子的时钟界面。 首先，我们需要了解Processing的基本语法。...
canvas实现粒子时钟效果
08-31
在这个实例中，我们将利用Canvas来创建点阵数字，然后将这些数字动态地转换成显示时间的粒子时钟。 首先，我们提到的“digit.js”是一个包含0到9以及冒号的三维数组，表示每个数字的二维点阵。这个点阵是7行10列的...
html5网站粒子时钟,h5 canvas实现粒子时钟的详细方法
weixin_39966765的博客
06-10 157
本篇文章给大家带来的内容是关于h5 canvas实现粒子时钟的详细方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我们先看看粒子时钟的效果，如下：下面我们将通过canvas和js实现，首先要创建一个html文件并添加一个canvas画布，如下：Document.container{margin: 0, auto;width: 600px;}下面导入素材，digit.js，素材中...
Canvas实现数字电子时钟（带粒子掉落效果）
最新发布
qq_44910894的博客
04-03 374
本文主要演示了如何使用 Canvas 绘图技术实现一个简易的数字电子时钟的效果，增加了粒子掉落效果，采用了面对对象的实现思路。
实现粒子时钟特效
weixin_64740434的博客
01-22 394
【代码】实现粒子时钟特效。
粒子时钟的代码
weixin_44548147的博客
05-03 308
首先我们需要利用矩阵来做0~9的数字以及做一个冒号，代码如下： 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], ...
html5 -- Canvas
qq_36320160的博客
10-08 122
Canvas绘制简单图形 一、绘制文字 　　fillText(text, x, y[, maxWidth]) -- 填充方式 　　strokeText(text, x, y[, maxWidth]) ...
Flutter -如何创建炫酷粒子时钟效果！
Android 开发架构
08-19 779
背景 Google在2019年11月18日发起了The Flutter Clock Challenge挑战活动，内容很简单：使用Flutter UI工具包设计时钟。Google专家小组将根据四个主要标准对参赛作品进行评判：视觉美感，创意新颖性，代码质量和整体执行力。 在这之前，我只使用过Flutter一两次，这对于我来说是一个潜在的机会。 最初的想法 挑战开始了大约两周后，我才有了一些想法，但还没有编写任何代码，解决此类问题时，我通常的方法是首先寻找现有的解决方案来找灵感。但这次不行。相反，我在Figma上
canvas粒子时钟
X__TAO的博客
09-01 880
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组，包含的是0到9以及冒号(digit[10])的二维点阵。每个数字的点阵表示是7*10大小的二维数组 通过遍历数字点阵的二维数组，当该位置的值为1时，则绘制一个粒子，否则不绘制 将绘制数字的函数命名为renderDigit()。在该函数中，将粒子绘制为
(狂神)ElasticSearch 7.x.x学习笔记
愿你拥有大风与烈酒,也能享受孤独与自由
03-07 2334
ElasticSearch Elaticsearch，简称为ES，ES是一个开源的高扩展的分布式全文检索引擎，它可以近乎实时的存储、检索数据；本身扩展性很好，可以扩展到上百台服务器，处理 PB 级别（大数据时代）的数据。ES由 Java 语言开发并使用 Lucene 作为其核心来实现所有索引和搜索的功能，但是它的目的是通过简单的 RESTFULL API 来隐藏 Lucene 的复杂性，从而让全文搜索变得简单。据国际权威的数据库产品评测机构 DB Engines 的统计，在2016 年1月，ElasticS
Layui判断用户名是否重复
愿你拥有大风与烈酒,也能享受孤独与自由
12-06 1837
Layui表单验证支持ajax判断用户名是否重复 在一个表单中，在提交前我们想判断该用户名是否存在，在layui中不支持,可以使用form表单的verify来进行验证 步骤 html <div class="layui-form-item"> <label class="layui-form-label required">用户名</label> <div class="layui-input-block">
Layui搜索数据的重载
愿你拥有大风与烈酒,也能享受孤独与自由
12-25 1791
Layui 表格重载数据 可以用ajax 但… (写的依然很抠脚.) 遇到的问题: 返回值都是null 后台无法获取参数 解决 1.page和limit参数 ​ 在Layui的重载表格中，会自动向请求的地址发出page和limit参数，所以不必在写page和limit参数了。 终于体会到了作者设计此处时的奇妙和厉害之处 解决代码 // 监听搜索操作 form.on('submit(data-search-btn)', function (data) { //执行搜索重载 table.
css 粒子时钟
06-01
下面是一个基于CSS实现的粒子时钟示例，可以在网页上显示一个数字时钟，时钟中的数字由许多小圆点组成，组成小圆点的粒子会随着时间的变化而变化位置。代码如下： HTML代码： ``` <div class="digit"></div> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值