[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

最新推荐文章于 2024-06-06 15:07:55 发布
最新推荐文章于 2024-06-06 15:07:55 发布
阅读量215 收藏
点赞数
分类专栏： 前端 文章标签： html5 倒计时
原文链接：https://www.mk2048.com/blog/blog.php?id=hbjcjcikc21j&title=%5Bjs%E9%AB%98%E6%89%8B%E4%B9%8B%E8%B7%AF%5D+html5+canvas%E6%95%99%E7%A8%8B+-+%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AA%E6%95%B0%E7%A0%81%E5%80%92%E8%AE%A1%E6%97%B6%E6%95%88%E6%9E%9C
版权

效果图：

这个实例主要注意:

1，剩余时间的计算

2，每个时间数字的绘制

时间主要有0-9和一个冒号组成，用数组来表示( 0: 就是不画圆，1：就是画一个蓝色的圆 )

num.js文件：

  1 var digital =
  2 [
  3     [
  4         [0,0,1,1,1,0,0],
  5         [0,1,1,0,1,1,0],
  6         [1,1,0,0,0,1,1],
  7         [1,1,0,0,0,1,1],
  8         [1,1,0,0,0,1,1],
  9         [1,1,0,0,0,1,1],
 10         [1,1,0,0,0,1,1],
 11         [1,1,0,0,0,1,1],
 12         [0,1,1,0,1,1,0],
 13         [0,0,1,1,1,0,0]
 14     ],//0
 15     [
 16         [0,0,0,1,1,0,0],
 17         [0,1,1,1,1,0,0],
 18         [0,0,0,1,1,0,0],
 19         [0,0,0,1,1,0,0],
 20         [0,0,0,1,1,0,0],
 21         [0,0,0,1,1,0,0],
 22         [0,0,0,1,1,0,0],
 23         [0,0,0,1,1,0,0],
 24         [0,0,0,1,1,0,0],
 25         [1,1,1,1,1,1,1]
 26     ],//1
 27     [
 28         [0,1,1,1,1,1,0],
 29         [1,1,0,0,0,1,1],
 30         [0,0,0,0,0,1,1],
 31         [0,0,0,0,1,1,0],
 32         [0,0,0,1,1,0,0],
 33         [0,0,1,1,0,0,0],
 34         [0,1,1,0,0,0,0],
 35         [1,1,0,0,0,0,0],
 36         [1,1,0,0,0,1,1],
 37         [1,1,1,1,1,1,1]
 38     ],//2
 39     [
 40         [1,1,1,1,1,1,1],
 41         [0,0,0,0,0,1,1],
 42         [0,0,0,0,1,1,0],
 43         [0,0,0,1,1,0,0],
 44         [0,0,1,1,1,0,0],
 45         [0,0,0,0,1,1,0],
 46         [0,0,0,0,0,1,1],
 47         [0,0,0,0,0,1,1],
 48         [1,1,0,0,0,1,1],
 49         [0,1,1,1,1,1,0]
 50     ],//3
 51     [
 52         [0,0,0,0,1,1,0],
 53         [0,0,0,1,1,1,0],
 54         [0,0,1,1,1,1,0],
 55         [0,1,1,0,1,1,0],
 56         [1,1,0,0,1,1,0],
 57         [1,1,1,1,1,1,1],
 58         [0,0,0,0,1,1,0],
 59         [0,0,0,0,1,1,0],
 60         [0,0,0,0,1,1,0],
 61         [0,0,0,1,1,1,1]
 62     ],//4
 63     [
 64         [1,1,1,1,1,1,1],
 65         [1,1,0,0,0,0,0],
 66         [1,1,0,0,0,0,0],
 67         [1,1,1,1,1,1,0],
 68         [0,0,0,0,0,1,1],
 69         [0,0,0,0,0,1,1],
 70         [0,0,0,0,0,1,1],
 71         [0,0,0,0,0,1,1],
 72         [1,1,0,0,0,1,1],
 73         [0,1,1,1,1,1,0]
 74     ],//5
 75     [
 76         [0,0,0,0,1,1,0],
 77         [0,0,1,1,0,0,0],
 78         [0,1,1,0,0,0,0],
 79         [1,1,0,0,0,0,0],
 80         [1,1,0,1,1,1,0],
 81         [1,1,0,0,0,1,1],
 82         [1,1,0,0,0,1,1],
 83         [1,1,0,0,0,1,1],
 84         [1,1,0,0,0,1,1],
 85         [0,1,1,1,1,1,0]
 86     ],//6
 87     [
 88         [1,1,1,1,1,1,1],
 89         [1,1,0,0,0,1,1],
 90         [0,0,0,0,1,1,0],
 91         [0,0,0,0,1,1,0],
 92         [0,0,0,1,1,0,0],
 93         [0,0,0,1,1,0,0],
 94         [0,0,1,1,0,0,0],
 95         [0,0,1,1,0,0,0],
 96         [0,0,1,1,0,0,0],
 97         [0,0,1,1,0,0,0]
 98     ],//7
 99     [
100         [0,1,1,1,1,1,0],
101         [1,1,0,0,0,1,1],
102         [1,1,0,0,0,1,1],
103         [1,1,0,0,0,1,1],
104         [0,1,1,1,1,1,0],
105         [1,1,0,0,0,1,1],
106         [1,1,0,0,0,1,1],
107         [1,1,0,0,0,1,1],
108         [1,1,0,0,0,1,1],
109         [0,1,1,1,1,1,0]
110     ],//8
111     [
112         [0,1,1,1,1,1,0],
113         [1,1,0,0,0,1,1],
114         [1,1,0,0,0,1,1],
115         [1,1,0,0,0,1,1],
116         [0,1,1,1,0,1,1],
117         [0,0,0,0,0,1,1],
118         [0,0,0,0,0,1,1],
119         [0,0,0,0,1,1,0],
120         [0,0,0,1,1,0,0],
121         [0,1,1,0,0,0,0]
122     ],//9
123     [
124         [0,0,0,0],
125         [0,0,0,0],
126         [0,1,1,0],
127         [0,1,1,0],
128         [0,0,0,0],
129         [0,0,0,0],
130         [0,1,1,0],
131         [0,1,1,0],
132         [0,0,0,0],
133         [0,0,0,0]
134     ]//:
135 ];
View Code

 

倒计时实现：

 1 <head>
 2     <meta charset='utf-8' />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./num.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext('2d'),
13                 width = oCanvas.width, height = oCanvas.height,
14                 radius = 10,
15                 leftTime = 0,
16                 endTime = new Date( 2017, 09, 10, 15, 30, 02 );
17             
18             leftTime = getLeftTime();
19             showTime( oGc );
20             setInterval(function(){
21                 oGc.clearRect( 0, 0, width, height );
22                 leftTime = getLeftTime();
23                 showTime( oGc );
24             }, 1000);
25 
26             function showTime( cxt ){
27                 var hour = parseInt( leftTime / 3600 );
28                 var min = parseInt( ( leftTime - hour * 3600 ) / 60 );
29                 var sec = leftTime % 60;
30 
31                 showNum( 0, 0, parseInt( hour / 10 ), cxt );
32                 showNum( 15 * ( radius   1 ), 0, parseInt( hour % 10 ), cxt );
33                 showNum( 30 * ( radius   1 ), 0, 10, cxt );
34                 showNum( 39 * ( radius   1 ), 0, parseInt( min / 10 ), cxt );
35                 showNum( 54 * ( radius   1 ), 0, parseInt( min % 10 ), cxt );
36                 showNum( 69 * ( radius   1 ), 0, 10, cxt );
37                 showNum( 78 * ( radius   1 ), 0, parseInt( sec / 10 ), cxt );
38                 showNum( 93 * ( radius   1 ), 0, parseInt( sec % 10 ), cxt );
39             }
40 
41             function getLeftTime(){
42                 var curTime = new Date();
43                 var restTime = endTime.getTime() - curTime.getTime();
44                 restTime = Math.round( restTime / 1000 );
45                 return restTime > 0 ? restTime : 0;
46             }
47 
48             //显示时间的每一位
49             function showNum( x, y, num, cxt ){
50                 cxt.fillStyle = '#09f';
51                 for( var i = 0; i < digital[num].length; i   ){
52                     for( var j = 0; j < digital[num][i].length; j   ){
53                         if ( digital[num][i][j] == 1 ){
54                             cxt.beginPath();
55                             cxt.arc( x   j * 2 * ( radius   1 )   ( radius   1 ), y   i * 2 * ( radius   1 )   ( radius   1 ), radius, 0,   360 * Math.PI / 180, false );
56                             cxt.closePath();
57                             cxt.fill();
58                         }
59                     }
60                 }
61             }
62         }
63     </script>
64 </head>
65 <body>
66     <canvas id="canvas" width="1200" height="300"></canvas>
67 </body>

 


这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了
 
 
我爱丁丁猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5倒计时制作酷炫的canvas粒子动画倒计时代码
11-10
html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码
h5 canvas绘制电子数字时钟
henly1217的专栏
01-12 438
使用h5的canvas绘制电子数字时钟
html5 canvas 倒计时,canvas环形倒计时组件的示例代码
weixin_42401356的博客
06-29 353
本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下：效果如下图一：Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用一、如何使用1. html代码ID属性可随意取名2. 引入process.js文件页面引用3. 初始化参数实例化即可window.onload = function () {let ctd = new Countdown...
html5 canvas 倒计时,逼真的HTML5 canvas模拟时钟特效
weixin_28994403的博客
06-29 154
插件描述：thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。使用该模拟时钟插件首先需要引入jQuery和jquery.thooClock.js文件。可以使用一个空的来作为时钟的容器。在页面DOM元素加载完毕之后，可以通过thooClock()方法来初始化该...
html5 canvas 实现倒计时 功能
dichengcan3810的博客
07-27 356
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心点坐标 Y轴; ...
元旦倒计时代码+（HTML+css+JavaScript + canvas）写的一个 2023 年跨年倒计时代码
01-13
前端语言（HTML+css+JavaScript + canvas）写的一个 2023 年跨年倒计时代码 倒计时日期格式：月-日-时-分-秒 也可以自定义日期格式 自定义添加祝福语等 代码时按照元旦作为计算日期 也可以按照农历新年作为日期格式
js html5 canvas制作多个小球碰撞的动画效果
11-07
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
html5 canvas-2.用canvas制作一个猜字母的小游戏
01-21
今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
canvas倒计时
08-06
炫丽的倒计时效果Canvas绘图与动画基础
html5在线考试倒计时,html5 canvas 实现倒计时 功能
weixin_30246833的博客
06-04 1148
function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度 无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //...
基于HTML5 canvas圆形倒计时器jQuery插件
souhugirl的专栏
02-12 2141
这是一款基于html5 canvas的圆形倒计时器jQuery插件。它可以使你非常轻松的创建圆形的倒计时器。该jQuery倒计时器插件有12种themes，它们基于 HTML5 canvas 来渲染各种圆环。 这个jQuery环形倒计时器插件依赖于jquery.knob.js和jquery.throttle.js两个外部插件。 在线演示：http://www.htmleaf.com
HTML5 canvas画布写炫彩动态的倒计时效果
weixin_33898876的博客
09-23 185
html代码如下，插入了2个js代码。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>canvas</title> 5 </head> 6 <body> 7 <canvas id="canvas" style="b...
js+画布canvas制作时钟特效
fangyuwuzhu的博客
04-03 741
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="c" width="500&
html5 canvas 倒计时,html5 canvas 倒计时
weixin_39940714的博客
06-29 155
Canvasvar currentSeconds = 10;var countDownSeconds = 10;var interval_id = setInterval("drawDoubleCircle()", 1000);function drawDoubleCircle() {if (currentSeconds <= 0) {clearInterval(interval_id);}...
更新——Canvas画布动画效果之实现倒计时
weixin_30408309的博客
10-14 188
Hello，大家好！ 小W复活啦！继续欢乐的给大家更博，输送新知识~~ 不开玩笑啦！秒进正题~~~ 上次更博，小W给大家介绍了Canvas画布的基础部分，以及实现了一个由7*10点阵图显示的倒计时的基本架构。 上次的效果如下图所示，仅仅只是一个时间的静态显示而已： 今天呢，小W想实现就是，让它开始倒计时！效果先给大家看一下： Canvas画布用于图形的绘制、动画，都是通过脚本（...
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
艾恩小灰灰的博客
06-06 816
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
“推荐系统”相关资源推荐
最新发布
06-14
推荐了国内外对推荐系统的讲解相关资源
canvas制作倒计时炫丽效果
05-17
好的，以下是一个简单的canvas倒计时炫丽效果的示例代码，你可以根据自己的需求进行修改和优化： HTML代码： ```html <canvas id="canvas" width="300" height="300"></canvas> ``` JavaScript代码： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值