之前看到别人用HTML5制作时钟，自己也写了一个，这是很久以前写的了，没有注释，现在自己看都晕了(注释的重要性就体现在这边了)，找时间加上注释，让自己和别人都比较好理解。

 <!DOCTYPE html>

 <html>

 <head>

     <title>html5时钟</title>

 </head>

 <body>

     <canvas id = "canvas"></canvas>

     <script>

         var Clock = function (canvas, options) {

             this.canvas = canvas;

             this.ctx = this.canvas.getContext("2d");

             this.options = options;

         };

         Clock.prototype = {

             constructor: Clock,

             drawCircle: function () {

                 var ctx = this.ctx;

                 ctx.strokeStyle = "black";

                 ctx.arc(this.canvas.width / 2, this.canvas.height / 2, 50, 0, 2 * Math.PI, false);

                 ctx.stroke();

             },

             drawNum: function () {

                 var ctx = this.ctx;

                 var angle = Math.PI * 2 / 12;

                 for (var i = 1; i <= 12; i += 1) {

                     ctx.font = "20px Georgia";

                     ctx.textAlign = "center";

                     ctx.textBaseline = 'middle';

                     ctx.fillText(String(i), this.canvas.width / 2 + Math.cos(3 *Math.PI / 2 + angle * i) * 40, this.canvas.height / 2 + Math.sin(3 * Math.PI / 2 + angle * i) * 40);

                 }

             },

             drawPointer: function () {

                 var ctx = this.ctx;

                 var that = this;

                 var date, hour, minute, second;

                 date = new Date();

                 hour = date.getHours();

                 if (hour > 12) {

                     hour = hour % 12;

                 }

                 minute = date.getMinutes();

                 second = date.getSeconds();

                 var b = minute * Math.PI / 30;

                 var c = second * Math.PI / 30;

                 var a = hour * Math.PI / 6 + Math.PI / 6 * minute / 60;

                 var minuteAngle = Math.PI * 2 / 3600;

                 var secondAngle = Math.PI * 2 / 60;

                 var hourAngle = Math.PI * 2 / 12 / 3600;

                 ctx.beginPath();

                 ctx.save();

                 ctx.translate(that.canvas.width / 2, that.canvas.height / 2);

                 ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);

                 ctx.fill();

                 ctx.closePath();

                 ctx.beginPath();

                 a += hourAngle;

                 ctx.rotate(a);

                 ctx.fillRect(-2, -22, 4, 30);

                 ctx.closePath();

                 ctx.beginPath();

                 b += minuteAngle;

                 ctx.rotate(b - a);

                 ctx.fillRect(-1.5, -26, 3, 35);

                 ctx.closePath();

                 ctx.beginPath();

                 c += secondAngle;

                 ctx.rotate(c - b);

                 ctx.fillRect(-1, -30, 2, 40);

                 ctx.closePath();

                 ctx.restore();

             },

             rePaint: function () {

                 this.drawPointer();

                 this.drawCircle();

                 this.drawNum();

             },

             tik: function () {

                 var that = this;

                 var ctx = this.ctx;

                 this.rePaint();

                 window.timer = setInterval(function () {

                     ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);

                     that.rePaint();

                 }, 1000);

             }

         };

         var options;

         var clock = new Clock(document.getElementById("canvas"), options);

         clock.tik();

     </script>

 </body>

 </html>

这是时钟效果：

外观不太好看，如果对色彩比较敏感的话，可以自己修改代码，制作出好看的时钟。

使用HTML5制作时钟的更多相关文章

  1. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  2. 使用HTML5制作loading图

    昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...

  3. 程序员用HTML5制作的爱心树表白动画

    体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...

  4. html5制作一个时钟

    试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...

  5. 使用HTML5中的Canves标签制作时钟特效

    <!DOCTYPE html > <html> <head> </head> <body> <canvas id="cloc ...

  6. 利用html5制作一个时钟动画

    <canvas id="clock" width="500" height="500" style="background- ...

  7. jquery+html5制作超酷的圆盘时钟表

    自己封装的一个用HTML5+jQuery写的时钟表 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

  8. Html5绘制时钟

    最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/ja ...

  9. JavaScript制作时钟特效

    需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...

随机推荐

  1. tomcat如何配置俩个版本

    Java-web除了JDK,还需配置服务器(tomcat); 如何配置俩个版本的tomcat; 1.将tomcat-bin目录下的startup.bat和catalina.bat里的%CATALINA ...

  2. 利用MFC Picture Control控件 加载bmp,png

    1.在资源视图,选择PictureControl,并且在属性中把Type设置为Bitmap. 2.加载PNG CStatic* pWnd = (CStatic*)GetDlgItem(IDC_PIC) ...

  3. CentOS 6.8安装Ceph

    机器规划 IP 主机名 角色 10.101.0.1 ceph01 mon admin mds 10.101.0.2 ceph02 ods 10.101.0.3 ceph03 ods 10.101.0. ...

  4. MySQL---正确使用索引、limit分页、执行计划、慢日志查询

    正确使用索引 数据库表中添加索引后确实会让查询速度起飞,但前提必须是正确的使用索引来查询,如果以错误的方式使用,则即使建立索引也会不奏效.即使建立索引,索引也不会生效: - like '%xx' se ...

  5. PredicateBuilder

    using System; using System.Linq; using System.Linq.Expressions; namespace Oyang.Tool { public static ...

  6. php的基础知识（四）

    14.数组: 索引数组: 下标就是数字开始的. $arr = ['a','b','c',1,2,3]; 关联数组: $arr = [ 'a' => 'b', 'c' => 'd'; 'e' ...

  7. APSC4xSeries_Ver32.exe在win764位提示缺少DLL错误解决办法

    APSC4xSeries_Ver32.exe在win764位提示缺少DLL错误解决办法 从网上下载oatime_epson-me1清零软件,Stylus4xProgram_Ver32的 解决办法:还是 ...

  8. pyhton新手学习之增删改查

    一 .列表的定义 1.列表的定义     names = [ "xiajiqni", "test", "wangwu","oldb ...

  9. matlab读取txt文本

    textread函数 原文:http://blog.sina.com.cn/s/blog_618af1950100k926.html 文档:https://ww2.mathworks.cn/help/ ...

  10. Java8 Comparator 排序方法

    Java8 中 Comparator 接口提供了一些静态方法,可以方便于我们进行排序操作,下面通过例子讲解下如何使用 对整数列表排序(升序) List<Integer> list = Ar ...