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. 注册登录系统项目思路 -- javaweb

    功能:   > 注册   > 登录   ---------------------------------   JSP:   * login.jsp  --> 登录表单   * re ...

  2. idea调试SpringMvc, 出现：java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener错误的解决办法

    有时,使用idea开发SpringMvc发现调试时出现以下错误: 12-Mar-2017 12:08:02.345 严重 [RMI TCP Connection(2)-127.0.0.1] org.a ...

  3. 关于mui选择器的使用

    使用mui引入选择器的picker.js.poppicker.js.及他们的css文件之后引入代码与点击确定之后的状态: document.querySelector('#osex').addEven ...

  4. Django ORM模型的一点体会

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载. 使用Python的Django模型的话,一般都会用它自带的ORM(Object-relational ma ...

  5. X-Scan使用教程

    下载X-Scan扫描器,解压缩,双击Xscan_gui.exe即可运行,不需要安装.X-Scan采用多线程的方式,对指定主机或者网段进行扫描. 其扫描功能(插件)有: 开放服务:扫描TCP端口状态,根 ...

  6. TIME_WAIT 另一种解决方式 SO_LINGER

         被TIME_WAIT问题烦得不行,又发现了另一种解决方式,SO_LINGER.      对SO_LINGER解释最通用的自然是<UNP>,现摘录如下      SO_LINGE ...

  7. iOS开发之layoutSubviews

    当发生下面两种情况该方法会被调用: (1)一个控件的frame发生改变的时候. (2)布局子控件的时候 一般在这里布局内部的子控件(设置子控件的frame) 例如: - (void)layoutSub ...

  8. 小程序新能力-个人开发者尝鲜微信小程序

    个人开发者的福利 微信小程序,刚听到这个新名词的时候,我就兴冲冲的去找入口,看看自己能不能搞个微信小程序的HelloWorld,毕竟能在微信上把自己写的一些小工具跑起来还是满炫酷的. 没想,网上一查, ...

  9. python之字符串

    字符串与文本操作 字符串: Python 2和Python 3最大的差别就在于字符串 Python 2中字符串是byte的有序序列 Python 3中字符串是unicode的有序序列 字符串是不可变的 ...

  10. iOS 一个方法首次安装滚播图 展示应用简介

    //第一次安装时会有引导页展示  非第一次直接进入应用页 if ([[[NSUserDefaults standardUserDefaults] objectForKey:@"isOne&q ...