我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

JS+Canvas实现动态时钟效果

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

JS+Canvas实现动态时钟效果

基于Canvas制作的动态时钟demo，供大家参考，具体内容如下


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>动态时钟</title>
  <script type="text/javascript" class="lazy" data-src="js/lattice.js"></script>
  <script type="text/javascript" class="lazy" data-src="js/script.js"></script>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
   }
   #canvasBox{
    border-width: 2px;
    border-color: black;
    border-style: solid;
    width: 80%;
    margin: 0 auto;
   }
  </style>
 </head>
 <body>
  <!-- 将canvas放到一个盒子中，用盒子控制canvas的位置 -->
  <div id="canvasBox">
   <canvas id="canvas">
    此浏览器不支持canvas
   </canvas>
  </div>
 </body>
</html>

lattice.js


lattice =
    [
        [
            [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.js


var CANVAS_WIDTH;
var CANVAS_HEIGHT = 600;
//设置点阵中圆的半径
var RADIUS = 8;
//设置时钟距离边框的位置
var MARGIN_LEFT = 100;
var MARGIN_TOP = 40;
 
//获取初始状态的时间
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
 
//用于存储小球对象
var balls = [];
//小球颜色
var colors = ["red","orenge","yellow","green","blue","purple","pink"]
 
window.onload = function(){
 //获得canvas外部盒子的宽度，使canvas与外部盒子宽度相同
 var canvasBox = document.getElementById("canvasBox");
 var boxWidth = getComputedStyle(canvasBox,null);
 CANVAS_WIDTH = parseInt(boxWidth.width);
 
 //设置canvas宽高并获得画笔对象
 var canvas = document.getElementById("canvas");
 canvas.width = CANVAS_WIDTH;
 canvas.height = CANVAS_HEIGHT;
 var context = canvas.getContext("2d");
 
 //定时调用，50毫秒调用一次
 setInterval(function(){
  //绘制函数
  draw(context);
 },50);
 
 function draw(ctx){
  //刷新屏幕
  ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
  
  //获取当前时间
  var curTime = new Date();
  var curHours = curTime.getHours();
  var curMinutes = curTime.getMinutes();
  var curSeconds = curTime.getSeconds();
 
  //画小时
  drawLattice(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10),ctx);
  drawLattice(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10),ctx);
  //画冒号
  drawLattice(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
  //画分钟
  drawLattice(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10),ctx);
  drawLattice(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10),ctx);
  //画冒号
  drawLattice(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
  //画秒
  drawLattice(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10),ctx);
  drawLattice(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10),ctx);
  
  //更新时间并绘制小球
  update(context,curHours,curMinutes,curSeconds);
  
  //观察小球数量
  //console.log(balls.length);
 }
 
 //参数：
 //x：绘制数字点阵的左上角的横坐标
 //y：绘制数字点阵的左上角的纵坐标
 //num：要绘制的数字，实际上是lattice的索引，10表示冒号
 //ctx：画笔
 function drawLattice(x,y,num,ctx){
  for(var i=0;i<lattice[num].length;i++){
   for(var j=0;j<lattice[num][i].length;j++){
    if(lattice[num][i][j]==1){
     ctx.beginPath();
     ctx.fillStyle = "blue";
     ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
     ctx.fill();
     ctx.closePath();
    }
   }
  }
 }
 
 //更新时间并绘制小球
 function update(ctx,curHours,curMinutes,curSeconds){
  if(seconds!=curSeconds){
   //更新小时
   if(parseInt(curHours/10)!=parseInt(hours/10)){
    addBalls(MARGIN_LEFT,MARGIN_TOP,parseInt(curHours/10));
   }
   if(parseInt(curHours%10)!=parseInt(hours%10)){
    addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
   }
   //更新分钟
   if(parseInt(curMinutes/10)!=parseInt(minutes/10)){
    addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
   }
   if(parseInt(curMinutes%10)!=parseInt(minutes%10)){
    addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
   }
   //更新秒
   if(parseInt(curSeconds/10)!=parseInt(seconds/10)){
    addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
   }
   if(parseInt(curSeconds%10)!=parseInt(seconds%10)){
    addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
   }
   
   //更新所有时间
   hours = curHours;
   minutes = curMinutes;
   seconds = curSeconds;
  }
  //绘制小球
  drawBalls(ctx);
  //更新小球运动
  updateBalls();
 }
 
 //添加单个小球
 //参数：
 //x：小球的横坐标
 //y：小球的纵坐标
 //num：变化的时间数字
 function addBalls(x,y,num){
  for(var i=0;i<lattice[num].length;i++){
   for(var j=0;j<lattice[num][i].length;j++){
    if(lattice[num][i][j]==1){
     //添加一个小球对象
     var ball = {
      //坐标
      x:x+j*2*(RADIUS+1)+(RADIUS+1),
      y:y+i*2*(RADIUS+1)+(RADIUS+1),
      //重力加速度
      g:1.5+Math.random(),
      //x、y方向的速度
      vx:Math.pow(-1,Math.ceil(Math.random()*1000))*5,
      vy:-5,
      //小球颜色
      color:colors[Math.floor(Math.random()*colors.length)]
     }
     //将小球添加进储存队列中
     balls.push(ball);
    }
   }
  }
 }
 
 //绘制小球
 function drawBalls(ctx){
  for(var i=0;i<balls.length;i++){
   ctx.beginPath();
   ctx.fillStyle = balls[i].color;
   ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
   ctx.fill();
   ctx.closePath();
  }
 }
 
 //更新小球运动
 function updateBalls(){
  //更新储存数组中的小球的动态
  for(var i=0;i<balls.length;i++){
   balls[i].x += balls[i].vx;
   balls[i].y += balls[i].vy;
   balls[i].vy += balls[i].g;
   
   //边缘碰撞检测
   if(balls[i].y>=CANVAS_HEIGHT-RADIUS){
    balls[i].y=CANVAS_HEIGHT-RADIUS;
    //模拟碰撞反弹和阻力
    balls[i].vy=-balls[i].vy*0.6;
   }
  }
  //当小球滚出画布便可以从数组中删除，以下是删除算法
  //储存应当保留的小球的数量
  var numBall = 0;
  for(var i=0;i<balls.length;i++){
   if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<CANVAS_WIDTH){
    //若判断当前小球在屏幕内，则将此小球尽量靠前，则每次循环后，数组最后面的小球就是滚出画布的小球
    balls[numBall] = balls[i];
    numBall++;
   }
  }
  //从数组后面删除小球
  while(balls.length>numBall){
   balls.pop();
  }
 }
};

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

JS+Canvas实现动态时钟效果

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

JS+Canvas实现动态时钟效果

2024-04-02

JavaScript实现动态时钟效果

2024-04-02

JavaScript如何实现动态时钟效果

本篇内容主要讲解“JavaScript如何实现动态时钟效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript如何实现动态时钟效果”吧!配置设计var config={ la
2023-07-02

JavaScript canvas实现七彩时钟效果

2024-04-02

js实现电子时钟效果

2024-04-02

Android Canvas自定义实现时钟效果

Android之Canvas自定义画一个时钟，供大家参考，具体内容如下 自定义控件，在安卓是也是一种无所不能的技术了，所有自带控件，以及组合自带控件不能实现的一些效果，我们都可以通过自定义控件来实现，不过，如果能有系统控件使用的就用系统自带
2022-06-06

JavaScript canvas实现动态点线效果

2024-04-02

js如何实现电子时钟效果

本篇内容主要讲解“js如何实现电子时钟效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js如何实现电子时钟效果”吧!代码如下（示例）：2023-07-02

js如何实现动态显示时间效果

2024-04-02

js实现拖动模态框效果

2024-04-02

JS实现模态框拖拽动态效果

2024-04-02

js+canvas实现代码雨效果

2024-04-02

pygame实现时钟效果

2024-04-02

如何使用JS时间控制实现动态效果

2024-04-02

怎么用HTML5的canvas实现一个炫酷时钟效果

小编给大家分享一下怎么用HTML5的canvas实现一个炫酷时钟效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！对于H5来说，canvas可以说是它最有特色的一
2023-06-09

JS如何实现模态框拖拽动态效果

本篇内容主要讲解“JS如何实现模态框拖拽动态效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JS如何实现模态框拖拽动态效果”吧!在实现这个案例效果首先我们了解几个属性，offsetLeft.o
2023-07-02

js如何实现拖动模态框效果

今天小编给大家分享一下js如何实现拖动模态框效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1.实现效果：点击链接，弹出模
2023-07-02

如何通过Canvas+JS实现简易的时钟

今天就跟大家聊聊有关如何通过Canvas+JS实现简易的时钟，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟
2023-06-17

使用canvas怎么实现一个github404动态效果

使用canvas怎么实现一个github404动态效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。文件目录文件资源文件源码与图片在文章末尾给出代码网页的body部分这里给
2023-06-09

vue2实现简易时钟效果

2024-04-02

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈