JS+ Html 画布实现的时钟
效果图：

闲来无聊做了一个网页的时钟，效果模拟传统时钟的运行方式，

运用了html 的画布实现指针，背景图片引用了网络图片。

具体原理：

首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。
通过setInterval 每秒刷新指针位置实现 传统机械表针的动态跳动。

本人是JS开发程序员，从业1年多。闲来无聊的简单页面，

欢迎大家提问，或者建议。共同进步

代码部分，直接复制HTML 文件中即可查看效果：

<!DOCTYPE html>

<html>

<head>

    <meta charset=utf-8>

    <title>clock</title>

</head>

<body style="color:green; <!--background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');--> background-size:100%; background-repeat: no-repeat; background-attachment:fixed">

    <div style="width: 900px; height: 900px; margin-top: 50px; margin-left: 50px;">

        <div style="position: absolute; left:119px;top: 193px; width: 900px; height: 900px; background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');  background-repeat: no-repeat; z-index: -1;">

        </div>

        <canvas id="t" width="800" height="800"></canvas>

        <div style="position: absolute; left:118px;top: 464px; width: 100px; height: 200px; background-color: white;  background-repeat: no-repeat; z-index: 10;">

        </div>

    </div>

    <script language="javascript">

                var s = setInterval(moveI, 1000);

                function moveI() {

                    var c = document.getElementById("t");

                    var pc = c.getContext("2d");

                    c.height = c.height;

                    //秒

                    pc.lineWidth = 3;

                    pc.strokeStyle = 'rgba(255,0,0,0.8)';

                    var now = new Date();

                    var sindex = getxy(150, now.getSeconds());

                    pc.moveTo(400, 400);

                    pc.lineTo(sindex.x, sindex.y);

                    pc.stroke();

                    pc.beginPath();

                    //分

                    pc.lineWidth = 7;

                    pc.strokeStyle = 'rgba(50,50,50,0.8)';

                    var mindex = getxy(120, now.getMinutes() + (now.getSeconds() / 60));

                    pc.moveTo(400, 400);

                    pc.lineTo(mindex.x, mindex.y);

                    pc.stroke();

                    pc.beginPath();

                    //时

                    pc.lineWidth = 10;

                    pc.strokeStyle = 'rgba(0,0,0,0.8)';

                    var hindex = getxy(80, ((now.getHours() > 12 ? now.getHours() - 12 : now.getHours()) + (now.getMinutes() / 60)) * 5);

                    pc.moveTo(400, 400);

                    pc.lineTo(hindex.x, hindex.y);

                    pc.stroke();

                };

                function getxy(r, t) {

                    //计算分区  0,1,2,3

                    var a = parseInt(t / 15);

                    //分区角度

                    t = t - 15 * a;

                    var y;

                    var x;

                    //基于分区的坐标计算

                    switch (a) {

                        case 0:

                            y = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));

                            x = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));

                            break;

                        case 1:

                            y = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));

                            x = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));

                            break;

                        case 2:

                            y = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));

                            x = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));

                            break;

                        case 3:

                            y = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));

                            x = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));

                            break;

                        default:

                            break;

                    }

                    y = (400 - r) + y;

                    x = (400 - r) + x;

                    return {

                        'x': x,

                        'y': y

                    };

                };

    </script>

</body>

</html>

假如生活欺骗了你，找50个程序员问问为什么编程；

假如生活让你想死，找50个程序员问问BUG改完了没有；

假如你觉得生活拮据，找50个程序员问问工资涨了没有；

假如你觉得活着无聊，找50个程序员问问他们一天都干了什么！

JS + HTml 时钟代码实现的更多相关文章

  1. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  2. javascript时钟代码 DEMO-002

    转载自:http://www.cnblogs.com/Mygirl/archive/2012/03/30/2425832.html 正常时间显示 复制代码 <SCRIPT language=ja ...

  3. JS Nice – JavaScript 代码美化和格式化工具

    JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...

  4. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. ios-UIWebView中js和oc代码的互调

    webview是ios中显示远程数据的网页控件,webview能显示的内容很多,MP4.文本.pdf等等: 关于js和oc代码的互相调用 1:oc中调用js代码; >>oc中调用js代码很 ...

  6. 关于JS的一些代码效果图

    关于JS的一些代码效果图 1.几乎所有DOM元素都有innerText.innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的. 需要注意的是 ...

  7. js基础 - 兼容代码

    js基础 - 兼容代码 . scrollTop . chrome document.body.scrollTop . IE && firefox document.documentEl ...

  8. [转]Asp.Net调用前台js调用后台代码分享

    1.C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> ...

  9. JS软键盘代码

    页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...

随机推荐

  1. storm1.0节点间消息传递过久分析及调优

    序:最近对storm平台系统进行性能检测发现偶尔会出现oncebolt向另一个twobolt发送数据后,twobolt要500毫秒后才接收到进行处理.这里简单说增大twobolt的并行度即可解决,但是 ...

  2. CLR查找和加载程序集的方式（二） 流程图

    在前一篇文章<CLR查找和加载程序集的方式(一)>中详细介绍了CLR查找和加载程序的方式,分别介绍了配置与代码的实现方式. 本篇通过一个具体的流程图来帮助大家更加直观明了深入的掌握CLR查 ...

  3. 去掉标题栏的方法（使用requestWindowFeature(Window.FEATURE_NO_TITLE);为什么失效）

    使用requestWindowFeature(Window.FEATURE_NO_TITLE)隐藏标题栏失效的原因,可能是activity继承的是AppCompatActivity.下面详细介绍了使用 ...

  4. Struts2之标签使用

    上一篇我们一起探讨了Struts2中的OGNL表达式的知识,本篇我们一起来学习一下关于Struts2标签的使用,包括:基础标签:property.set.bean.include:判断标签:if el ...

  5. 对于自定义标签类中JspBody类的invoke方法的理解

    下面是javaeeAPI中对于invoke()方法的介绍: 其中的参数out是一个Writer类的对象,如果写null,就是将标签体内容写到了与此jsp相关联的JspWriter对象,也就是下面的w: ...

  6. 打印时鼠标键盘移动的div创建

    function createDiv(id, label, offset_left, offset_top) { $("body").append($("<div& ...

  7. 一次安装rpcbind失败引发的思考

    问题: yum install rpcbind -y 出现如下错误: Error -.el6.x86_64 error: %pre(rpcbind--.el6.x86_64) scriptlet fa ...

  8. Android Weekly Notes Issue #250

    Android Weekly Issue #250 March 26th, 2017 Android Weekly Issue #250. 本期内容: 好几篇关于Android O预览版的文章; JU ...

  9. HTML5 的WebSocket

    认识HTML5的WebSocket

  10. 树莓派Raspberry实践笔记-简单方法安装minicom

    [原创链接]:http://www.cnblogs.com/atsats/p/6665566.html 本文结合最新的Raspbain jessie,使用图形化的方式安装一款软件:串口调试工具mini ...