跳动粒子时间HTML代码

跳动粒子时间HTML代码

跳动粒子时间代码,适合添加到博客侧栏,效果自行测试

<div class="card-content">  <canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>  <script>  (function(){var t=820;var a=250;var r=7;var n=10;var e=.65;var f;var o=[];const v=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];var h=[];var u=[[[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]]];function l(t){var a=[];f.fillStyle="#005EAC";var r=new Date;var e=70,o=30;var v=r.getHours();var u=Math.floor(v/10);var l=v%10;a.push({num:u});a.push({num:l});a.push({num:10});var c=r.getMinutes();var u=Math.floor(c/10);var l=c%10;a.push({num:u});a.push({num:l});a.push({num:10});var M=r.getSeconds();var u=Math.floor(M/10);var l=M%10;a.push({num:u});a.push({num:l});for(var p=0;p<a.length;p++){a[p].offsetX=e;e=m(e,o,a[p].num,t);if(p<a.length-1){if(a[p].num!=10&&a[p+1].num!=10){e+=n}}}if(h.length==0){h=a}else{for(var C=0;C<h.length;C++){if(h[C].num!=a[C].num){s(a[C]);h[C].num=a[C].num}}}i(t);g();return r}function s(t){var a=t.num;var n=u[a];for(var e=0;e<n.length;e++){for(var f=0;f<n[e].length;f++){if(n[e][f]==1){var h={offsetX:t.offsetX+r+r*2*f,offsetY:30+r+r*2*e,color:v[Math.floor(Math.random()*v.length)],g:1.5+Math.random(),vx:Math.pow(-1,Math.ceil(Math.random()*10))*4+Math.random(),vy:-5};o.push(h)}}}}function i(t){for(var a=0;a<o.length;a++){t.beginPath();t.fillStyle=o[a].color;t.arc(o[a].offsetX,o[a].offsetY,r,0,2*Math.PI);t.fill()}}function g(){var n=0;for(var f=0;f<o.length;f++){var v=o[f];v.offsetX+=v.vx;v.offsetY+=v.vy;v.vy+=v.g;if(v.offsetY>a-r){v.offsetY=a-r;v.vy=-v.vy*e}if(v.offsetX>r&&v.offsetX<t-r){o[n]=o[f];n++}}for(;n<o.length;n++){o.pop()}}function m(t,a,n,e){var f=u[n];for(var o=0;o<f.length;o++){for(var v=0;v<f[o].length;v++){if(f[o][v]==1){e.beginPath();e.arc(t+r+r*2*v,a+r+r*2*o,r,0,2*Math.PI);e.fill()}}}e.beginPath();t+=f[0].length*r*2;return t}var c=document.getElementById("canvas");c.width=t;c.height=a;f=c.getContext("2d");var M=new Date;setInterval(function(){f.clearRect(0,0,f.canvas.width,f.canvas.height);l(f)},50)})();  </script>  </div>

© 版权声明
THE END
喜欢就支持一下吧
点赞7
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称

    暂无评论内容

随即推荐
4K Downloader 高清4K视频下载软件 v5.12.11 便携版-五伯资源网

4K Downloader 高清4K视频下载软件 v5.12.11 便携版

4K Downloader是一款专业的视频下载软件,可以帮助用户快速方便地下载高清视频和音频文件。该软件支持从各大视频网站获取视频链接并下载,包括YouTube、Facebook、Vimeo、Dailymotion等。用户只...
别偷我白米饭的头像-五伯资源网别偷我白米饭11天前
02911
淘差价课程,无货源电商新手必备,开店、选品、运营、推广全攻略-五伯资源网

淘差价课程,无货源电商新手必备,开店、选品、运营、推广全攻略

淘宝开店注册、软件准备,到选品、上货、找货源,再到运营、推广、下单发货等,淘宝起店运营各个环节详细讲解
pochivka_wuKn的头像-五伯资源网pochivka_wuKn9天前
03410
总裁导航系统2025最新重构版强势回归-五伯资源网

总裁导航系统2025最新重构版强势回归

总裁导航系统时隔好几年现已经重新发布,现在是重构版总裁导航系统是一款为个人站长打造的专业导航+文章管理系统,以卓越的系统性能,个性的后台操作,丰富的系统功能,解决大多数小白/个人站长...
Petyalon的头像-五伯资源网Petyalon9天前
03211
FastGestures 鼠标/触控板/屏手势 v2.2.39 中文绿色版-五伯资源网

FastGestures 鼠标/触控板/屏手势 v2.2.39 中文绿色版

FastGestures是一款轻量级的Windows软件,可以帮助用户更快速、方便地进行各种操作。它使用手势识别技术,让用户通过简单的手势即可触发各种功能。
sindrom_ktmt的头像-五伯资源网sindrom_ktmt5天前
03814
Android 水墨工具箱 v1.2.0 多功能工具箱-五伯资源网

Android 水墨工具箱 v1.2.0 多功能工具箱

水墨工具箱是一款功能十分全面的手机工具箱。该软件中集成了多种常用工具和功能,能让用户在日常生活和工作中更加便利,欢迎有需要的小伙伴前来下载体验。
oyx551的头像-五伯资源网oyx55123天前
0416
实时变声器语音包(解锁会员)-五伯资源网

实时变声器语音包(解锁会员)

【软件名称】实时变声器语音包(解锁会员)【软件介绍】一款趣味十足的手机版变声器APP,提供能够在游戏、聊天过程中实时变声,男声可以变女声、女声也能变男声,这里有着多种多样的变声效果可...
kali的头像-五伯资源网kali20天前
03915
手机号定位找人 查岗必备好东西,再也不怕他出去鬼混-五伯资源网

手机号定位找人 查岗必备好东西,再也不怕他出去鬼混

【软件名称】手机号定位找人【软件版本】v8_6_1【软件大小】150MB 【软件介绍】:
pochivka_wuKn的头像-五伯资源网pochivka_wuKn昨天
0215
AIGC+PS美工教程:涵盖美工设计概述、基础理论与多项实操技能-五伯资源网

AIGC+PS美工教程:涵盖美工设计概述、基础理论与多项实操技能

课程目录├── [4]-004 标志系统 调色工具_ev.mp4├── [16]-016 详情精修_ev.mp4
别偷我白米饭的头像-五伯资源网别偷我白米饭9天前
04912
UltraSearch 文件搜索神器Pro v4.6.1.1102 便携版-五伯资源网

UltraSearch 文件搜索神器Pro v4.6.1.1102 便携版

UltraSearch一款超快的文件搜索软件,数秒就可以在硬盘中帮您搜索出文件,比系统自带的快N倍。UltraSearch并不是通过建立索引或后台处理,它是通过查看NTFS分区的主文件表(MFT)来快速找到文件...
test10238124的头像-五伯资源网test102381249天前
03811
气质导师刘玲玲体态管理气质女人的瑜伽课-五伯资源网

气质导师刘玲玲体态管理气质女人的瑜伽课

瑜伽体式的重点在于强调动作要点,明晰动作功效。网上大量没有经过实践检验的练习,不仅达不到预期的效果,反而让身材更加走样。
test10238124的头像-五伯资源网test1023812429天前
02110