之前看到别人用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. 多线程异步非阻塞之CompletionService

    引自:https://www.cnblogs.com/swiftma/p/6691235.html 上节,我们提到,在异步任务程序中,一种常见的场景是,主线程提交多个异步任务,然后希望有任务完成就处理 ...

  2. java并发实战：连接池实现

    池化技术简介 在我们使用数据库的过程中,我们往往使用数据库连接池而不是直接使用数据库连接进行操作,这是因为每一个数据库连接的创建和销毁的代价是昂贵的,而池化技术则预先创建了资源,这些资源是可复用的,这 ...

  3. Vue learning experience

    一.内置指令[v-ref] Official-document-expression: 父组件在子组件上注册的索引,便于直接访问.不需要表达式,必须提供参数ID,可以通过父组件的$ref对象访问子组件 ...

  4. 《MySQL必知必会》--使用cmd登陆数据库

    数据库:保存有组织的数据的容器(通常是一个文件或一组文件). 表:某种特定类型数据的结构化清单. 模式:关于数据库和表的布局及特性的信息. 列:表中的一个字段.所有表都是由一个或多个列组成的. 数据类 ...

  5. Python学习：12.Python字符串格式化

    字符串格式化 讲解Python这么久,也没有讲解Python的字符串的格式化,那我们今天就来了解一下python字符串格式化的强大之处. 首先我们先理解一下为什么要有字符串的格式化,就是为了方便字符串 ...

  6. ubuntu16.04 64位安装tftp服务器

    1.安装tftpd-hpa和xinetd sudo apt-get install tftpd-hpa xined2.针对64位操作系统安装openbsd-inetd apt-get install ...

  7. 【8086汇编-Day8】实验九

    Lab1 代码 ; 在屏幕上输出内存单元中的十进制两位数 assume cs:code, ds:data data segment db db , ; 前一个字节用于保存商,后一个字节用于保存余数 d ...

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

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

  9. Qt的4个图像类QImage/QPixmap/QBitmap/QPicture 转

    Qt的4个图像类QImage/QPixmap/QBitmap/QPicture 转 (一)QPixmap和QImage的区别 http://www.thisisqt.com/forum/viewthr ...

  10. LeetCode：33. Search in Rotated Sorted Array（Medium）

    1. 原题链接 https://leetcode.com/problems/search-in-rotated-sorted-array/description/ 2. 题目要求 给定一个按升序排列的 ...