之前看到别人用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. React通过dva-model-extend实现 dva 动态生成 model

    前言 实现通过单个component 单个router通过相应的标识对应产生不同model实现数据包分离,model namespce将会覆盖基础的Model,其中的model[state|subsc ...

  2. Java 序列化与反序列化（Serialization）

    一.什么是?为什么需要? 序列化(Serialization)是将对象的状态信息转化为可以存储或者传输的形式的过程,反序列化则为其逆过程. 内存的易失性:传输需要:一些应用场景中需要将对象持久化下来, ...

  3. JDBC中执行sql语句的 增 , 删 , 改 , 查 的方法

    executeQuery()  : 执行 SELECT 语句,它几乎是使用最多的 SQL 语句 executeUpdate() :   执行 INSERT.UPDATE 或 DELETE 语句以及 S ...

  4. redis整合Spring之序列化对象与反序列化

    写在最前面 1.Spring必须是4.2.6及以上版本才支持redis 2.jar包版本建议统一 需要准备jar包 1.aopalliance-1.0.jar 2.spring-data-common ...

  5. 能够还原jQuery1.8的toggle的功能的插件

    下面这个jQuery插件能够还原1.8的toggle的功能,如果你需要,可以直接把下面这段代码拷贝到你的jQuery里面,然后跟平时一样使用toggle的功能即可. //toggle plugin f ...

  6. mysql 主主架构，多入口 互为备份

    ,中小企业很多都是使用mysql主从方案,一主多从,读写分离等,但是单主存在单点故障,从库切换成主库需要作改动.因此,如果是双主或者多主,就会增加mysql入口,增加高可用.不过多主需要考虑自增长ID ...

  7. 对Python语法简洁的贴切描述

    很多人认为,Python与其他语言相比,具有语法简洁的特点.但这种简洁到底体现在哪些地方,很少有人能说清楚.今天看到一个对这一问题的描述,个人觉得很不错,原文如下: “Python语法主要用来精确表达 ...

  8. C语言程序设计：现代方法（第2版）第二章全部习题答案

    前言 本人在通过<C语言程序设计:现代方法(第2版)>自学C语言时,发现国内并没有该书完整的课后习题答案,所以就想把自己在学习过程中所做出的答案分享出来,以供大家参考.这些答案是本人自己解 ...

  9. 洛谷P4526 【模板】自适应辛普森法2(simpson积分)

    题目描述 计算积分 保留至小数点后5位.若积分发散,请输出"orz". 输入输出格式 输入格式: 一行,包含一个实数,为a的值 输出格式: 一行,积分值或orz 输入输出样例 输入 ...

  10. 北京Uber优步司机奖励政策（3月29日

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...