之前看到别人用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. Linux下抓取登陆用户密码神器mimipenguin

    windows下有Mimikatz,现在linux下有了mimipenguin,国外安全研究员huntergregal发布了工具mimipenguin,一款Linux下的密码抓取神器,弥补了Linux ...

  2. C++继承细节 -2

    继承与动态内存分配 //基类定义 class BaseClass { private: char *label; public: BaseClass() {} BaseClass(const char ...

  3. mysql 配置安装

    1.     下载: mysql-5.7.20是解压版免安装的,mysql-5.7.20下载地址:http://dev.mysql.com/downloads/mysql/ 直接下载,无需注册和登录. ...

  4. 03JavaScript 输出

    JavaScript 输出 JavaScript 没有任何打印或者输出的函数. 先来一点DOM的小知识点: DOM 解释: 您会经常看到 document.getElementById("i ...

  5. （七）json序列化

    在spring boot项目中已经包含有json序列化的框架,具体在包com.fasterxml.jackson.annotation中,建议看看详细源码. 但在项目应用上还是会有一些坑会出现的,举个 ...

  6. yii学习笔记（1），目录结构和请求过程

    最近找找工作面试,发现很多要求会yii.于是准备学习一个新的框架 先在腾讯课堂找了个视频看了一下,然后去网上现在了“归档文件”(还有一种方式是通过php的包管理工具“composer”安装) 归档文件 ...

  7. 安装cronsun管理定时脚本

    1. cronsun 是一个分布式任务系统,单个结点和 *nix 机器上的 crontab 近似.支持界面管理机器上的任务,支持任务失败邮件提醒,安装简单,使用方便,是替换 crontab 一个不错的 ...

  8. 关于指针的笔记【1】【C语言程序设计-谭浩强】

    指针是什么? 一个 变量的地址称为该变量的"指针"[将地址形象化的称为“指针”].(指针是什么百度百科) 注意区分储存单元的地址和内容这两个概念的区别. 直接访问:直接按变量名进行 ...

  9. STL---llist

    #include<iostream> #include<algorithm> #include<list> using namespace std; struct ...

  10. AS 3.1 项目打包成jar或aar

    1.首先明白一个道理. Android Studio编译的时候会自动将项目生成jar和aar的,我一开始以为jar需要自己单独生成,其实AS已经自动生成了,网上找的很多资料都是一个复制的过程而已. 只 ...