之前看到别人用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. 设计四个线程,其中两个线程每次对j增加1,另外两个线程对j每次减1,写出程序

    /* * 设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1.写出程序. */ public class ThreadTest { private int j; public sta ...

  2. 三层架构，Struts2，SpringMVC实现原理图

    三层架构,Struts2,SpringMVC实现原理图 三层架构实现原理 Struts2实现原理 SpringMVC实现原理

  3. PPTP

    一: VPN企业应用分类 1:远程访问VPN服务 员工个人电脑通过远程拨号到企业办公网络,如公司的OA系统. 运维人员远程拨号到DC机房,远程维护服务器. 2:企业内部网络之间VPN服务 公司分支机构 ...

  4. thinkphp5 toArray()报错

    //DB操作返回是数组.模型直接操作返回是对象 //对象类型转换数组 //打开 database.php 增加或修改参数 'resultset_type' => '\think\Collecti ...

  5. 分析nginx 日志常用命令

    一.概念 并发连接数    客户端向服务器发起请求,并建立了TCP连接.每秒钟服务器链接的总TCP数量,就是并发连接数.请求数    请求数指的是客户端在建立完连接后,向http服务发出GET/POS ...

  6. thinkphp5 rbac权限

    thinkphp 5 rbac权限 一 先创建一个数据库; 例如:创建一个test数据库;然后创建3个 表分别为:test_admin (管理员表), test_role,test_auth. 这个是 ...

  7. Java学习笔记二十六:Java多态中的引用类型转换

    Java多态中的引用类型转换 引用类型转换: 1.向上类型转换(隐式/自动类型转换),是小类型到大类型的转换: 2.向下类型转换(强制类型转换),是大类型到小类型的转换: 3.instanceof运算 ...

  8. BZOJ1011 莫比乌斯反演(基础题

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1101 [题目大意] 求[1,n][1,m]内gcd=k的情况 [题解] 考虑求[1,n ...

  9. 成都Uber优步司机奖励政策（1月10日）

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

  10. Java图片转字符

    很久都没有更新博客了,昨天下午一个朋友问我能不能将一张图片转换成字符画,然后我想我这个朋友不知道,也许有的朋友以不知道,我就简单的分享一下 package com.xsl.zhuanhuan; imp ...