用html+js的canvas绘制一个时钟【建议收藏】

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量169 收藏 2
点赞数 1
分类专栏： html从入门到入土 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52545155/article/details/129158442
版权

有时候我们在大屏上想展示一个时钟，但是又想要好看的，这个代码就非常的实用了，即可食用

1、效果展示

 

2、代码分享

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body style="height:100%">
  <div class="">
    <canvas id="canvas" style="height:100%" height="694">
      当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>
  </div>

  <script>
    let 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]
        ]//:
      ];

    let WINDOW_WIDTH = 1024;
    let WINDOW_HEIGHT = 768;
    let RADIUS = 8;
    let MARGIN_TOP = 1;
    let MARGIN_LEFT = 30;

    let curShowTimeSeconds = 0

    let balls = [];
    const colors = ["#126bae", "#93b5cf", "#51c4d3", "#1ba784", "#207f4c",
      "#f8df72", "#ffc90c", "#f26b1f", "#f6dcce", "#ee2c79"]

    window.onload = function () {

      WINDOW_WIDTH = document.body.clientWidth
      WINDOW_HEIGHT = document.body.clientHeight

      MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
      RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1

      MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);

      // 获取画布上下文
      let canvas = document.getElementById('canvas');
      let context = canvas.getContext("2d");

      // 给画布赋值
      canvas.width = WINDOW_WIDTH;
      canvas.height = WINDOW_HEIGHT;

      // 获取当前的事件
      curShowTimeSeconds = getCurrentShowTimeSeconds()
      // 这个函数是我们进行动画的关键，我们每隔 50毫秒，就进行一个渲染，更新画布
      setInterval(
        function () {
          render(context);
          update();
        }
        ,
        50
      );
    }

    // 获取当前的时间
    function getCurrentShowTimeSeconds() {
      let curTime = new Date();
      let ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();

      return ret;
    }

    // 这个函数控制着小球的变化
    function update() {

      let nextShowTimeSeconds = getCurrentShowTimeSeconds();
      // 下一个时间
      let nextHours = parseInt(nextShowTimeSeconds / 3600);
      let nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60)
      let nextSeconds = nextShowTimeSeconds % 60
      // 当前时间
      let curHours = parseInt(curShowTimeSeconds / 3600);
      let curMinutes = parseInt((curShowTimeSeconds - curHours * 3600) / 60)
      let curSeconds = curShowTimeSeconds % 60
      // 如果二者不相等，那就证明显示的时间需要发生改变，同时要将下落的小球添加到数组中
      if (nextSeconds != curSeconds) {
        if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
          addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours / 10));
        }
        if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
          addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));
        }

        if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) {
          addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes / 10));
        }
        if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) {
          addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinutes % 10));
        }

        if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) {
          addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));
        }
        if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) {
          addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds % 10));
        }

        curShowTimeSeconds = nextShowTimeSeconds;
      }
      // 更新小球数组
      updateBalls();
    }

    function updateBalls() {

      for (let i = 0; i < balls.length; i++) {
        // 给小球添加 x 方向的速度
        balls[i].x += balls[i].vx;

        let c = 1.0;
        // 碰撞检测
        if (balls[i].y + RADIUS + balls[i].vy >= WINDOW_HEIGHT) {
          c = (WINDOW_HEIGHT - (balls[i].y + RADIUS)) / balls[i].vy;
        }
        // 给小球添加 y 方向的速度
        balls[i].y += balls[i].vy;
        balls[i].vy += c * balls[i].g;

        // 碰撞检测
        if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
          balls[i].y = WINDOW_HEIGHT - RADIUS;
          balls[i].vy = - Math.abs(balls[i].vy) * 0.75;
        }
      }
      // 清空不在页面的小球，节省性能的开销
      let cnt = 0
      for (let i = 0; i < balls.length; i++)
        if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH)
          balls[cnt++] = balls[i]

      while (balls.length > cnt) {
        balls.pop();
      }
    }

    function addBalls(x, y, num) {

      for (let i = 0; i < digit[num].length; i++)
        for (let j = 0; j < digit[num][i].length; j++)
          if (digit[num][i][j] == 1) {
            // 给小球的添加应该有的属性，同时使用 Math.random() 使得小球更加多样性
            let aBall = {
              x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
              y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
              g: 1.5 + Math.random(),
              vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
              vy: -5,
              color: colors[Math.floor(Math.random() * colors.length)]
            }

            balls.push(aBall)
          }
    }
    // 渲染函数
    function render(cxt) {
      // 每一次渲染之前，我们都要将画布上的原来图案进行清空，不然会有重叠
      cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
      // 获取 时 分 秒
      let hours = parseInt(curShowTimeSeconds / 3600);
      let minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60)
      let seconds = curShowTimeSeconds % 60
      // 时 分 秒 每一个数字我们都是分开绘制的
      renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
      renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
      renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
      renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
      renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
      renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);
      renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
      renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);

      // 这是跳动小球的绘制，我们在之前会判断时间是否发生更改，
      // 如果更改，我们会将下一次要绘制的小球放入 balls 数组中，之后就行绘制
      for (let i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true);
        cxt.closePath();

        cxt.fill();
      }
    }

    function renderDigit(x, y, num, cxt) {
      // 这是显示在画布正中央的那个大数字
      cxt.fillStyle = "#142334";
      // 我们每一个数字的组成都是一个二维数组，由这些二维数组组成三维数组，这样我们可以进行判断，
      // 如果是 1 那就是显示出来，如果是 0 我们就不进行绘制
      for (let i = 0; i < digit[num].length; i++)
        for (let j = 0; j < digit[num][i].length; j++)
          if (digit[num][i][j] == 1) {
            cxt.beginPath();
            // 这是 canvas 画圆的内置函数
            cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
            cxt.closePath()

            cxt.fill()
          }
    }

  </script>
</body>

</html>

沐阳gg
关注
专栏目录
HTML+CSS+JavaScript+Canvas实现一个粒子时钟
04-19
在这个项目中，HTML 将用于设置基本的页面布局，可能包含一个`<canvas>`元素，这是JavaScript将用来绘制粒子时钟的画布。 CSS（Cascading Style Sheets）则负责美化HTML元素，定义颜色、字体、布局等样式。在粒子...
Html5使用Canvas绘制时钟动画效果
setsunadoudou的博客
09-19 449
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。 我们做所有的画之情需要一个画布，html的...
电子时钟（html+css+js)
cmyszhynfs的博客
09-15 622
【代码】电子时钟（html+css+js)
HTML计时事件（JavaScript）网页电子钟+网页计时器
m0_71385141的博客
09-25 1862
clearTimeout(setTimeout("函数","未来指定毫秒后调用函数"));setTimeout("函数","未来指定毫秒后调用函数");取消setIntval()
HTML5 Canvas绘制实时时钟
壹间show
08-14 1636
htm5 canvas绘制实时好看时钟，及save,restore，beginPath,closePath实际应用
H5新增canvas标签+js绘制动态时钟效果-代码
JackieDYH的博客
07-30 572
画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成 罗马数字。 canvas中圆形与矩形差距很大，canvas并没有提供专门绘制圆形的方法，但可以绘制圆弧，将圆弧首尾相连得到圆形 分解 附完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conten..
javascript+HTML5 canvas绘制时钟功能示例
10-17
### JavaScript + HTML5 canvas 绘制时钟功能知识点解析 #### HTML5 canvas 基础知识 HTML5 canvas 元素提供了一种通过JavaScript和它的Canvas绘图API来绘制图形的方式。一个 canvas 是一个矩形区域，可以通过脚本...
js+html5实现canvas绘制网页时钟的方法
11-23
本文实例讲述了js+html5实现canvas绘制网页时钟的方法，画的是一个可用于网页的、带摆的钟表，可以通过按钮调整其大小和位置，具体实现内容如下 <html> <head> <meta ...
JS+Canvas绘制动态时钟效果
10-19
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来创建一个动态时钟效果。Canvas是一个非常强大的工具，允许开发者在网页上绘制复杂的图形和动画。让我们一起解析给出的代码片段，了解如何实现这个...
使用Canvas HTML5画出时钟
m0_65627447的博客
11-21 1031
HTML5 Canvas画时钟
html5：canvas实现炫酷时钟
critans的博客
11-12 752
1.使用canvas的.arc()方法实现每毫秒时钟进度时分秒的绘制2.通过定时器每一毫秒绘制一次时钟，实现时钟的动画效果。
html5 Canvas标签结合Jquery的时钟
carefree527的博客
07-28 109
Canvas功能非常强大，就是网页画笔，个人也就简单的尝试，用它结合Jquery，做了一个简单的时钟，显示时、分、秒。
【Canvas】绘制时间轴+动态当前时间线
芳草萋萋鹦鹉洲哦
07-25 2171
/一分钟的宽度，每十分钟一小格每六个小格一个大格。重要ctx赋值全局变量，以免传输中改变。//超过2030时间从2030开始显示。//计算出当前时间与830之间的差值。//绘制时间轴时间线。//绘制动态时间线。...
html css js 实现简易时钟
weixin_42577332的博客
11-18 667
2. 利用getHours, getMinutes, getSeconds获取当前的时分秒。6. 利用setInterval每秒钟重新移动一次时分秒针的位置。5. 时针的位置 = rotate（当前小时*15 deg）3. 分针的位置 = rotate（当前分钟*6 deg）4. 秒针的位置 = rotate（当前秒数*6 deg）1. 通过日期对象获取当前时间。以下是html和js代码。
HTML+JS实现简单的时钟效果
sanmu_1的博客
08-26 2853
前言:想要实现时钟效果,关键就是要使用setTimeout()方法和clearTimeout()方法   首先搞清楚setTimeout()方法和clearTimeout()方法的用法: setTimeout()方法见名知意,就是设置时间跳出,用于在指定的毫秒数后调用函数或计算表达式,有两个参数,第一个参数是要执行的函数或表达式,第二个参数是多少毫秒后执行,只会调用一次。针对时钟效果,我们就...
html中钟表功能的js插件,javascript绘制简单钟表效果
weixin_42106357的博客
06-25 317
本文给大家分享一个canvas的时钟绘制，供大家参考，具体内容如下复制可直接使用h1 {text-align: center;}div {width: 400px;height: 400px;margin: 10px auto;padding: 0;}手绘时钟var clock = document.getElementById("c1").getContext("2d");// var cloc...
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 448
本文主要讲解如何搭建vue脚手架。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 929
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
vue上传预览CAD文件
只会写bug
09-24 598
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值