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. 476. Number Complement

    题目 Given a positive integer, output its complement number. The complement strategy is to flip the bi ...

  2. C++类对象大小的计算

    (一)常规类大小计算 C++类对象计算需要考虑很多东西,如成员变量大小,内存对齐,是否有虚函数,是否有虚继承等.接下来,我将对此举例说明. 以下内存测试环境为Win7+VS2012,操作系统为32位 ...

  3. Windows下GIT安装与使用（上传远程端）

    Windows下GIT安装与使用(上传远程服务器) 1.  登陆http://msysgit.github.io/并下载Git 2.  打开下载的exe文件,一路默认(路径可以去修改).有可能电脑需要 ...

  4. NDK(三方库引入、Mk文件)

    NDK笔记-----第三方库引入 一.字符操作: 1 二.NDK*(JNI)对象操作: 2 1.C++调用java对象 3 三.Android.mk说明: 3 四.Application.mk说明 3 ...

  5. 连接池 DBCP c3p0以及分页的案例

    1. 连接池 思考: 程序中连接如何管理? 连接资源宝贵:需要对连接管理 连接: a) 操作数据库,创建连接 b) 操作结束,  关闭! 分析: 涉及频繁的连接的打开.关闭,影响程序的运行效率! 连接 ...

  6. SQL AlawaysOn 之一：安装域控制器

    一.准备阶段 1.  计算机名称命名 2.IP地址修改.DNS修改 IP地址和DNS不一定要和图上的一致,只要固定就行了 二.安装阶段 1.服务器管理器,仪表盘,点击“添加角色和功能” 2.添加角色和 ...

  7. oStrictHostKeyChecking=no 参数

    应用在脚本当中,避免使用域名链接服务器的时候,检查knows_hosts文件

  8. iwebshop插件的操作

    <?php class Miao extends pluginBase { //插件名字 public static function name(){ return "秒杀" ...

  9. 新人报道~cnblogs

    我的名字:杨先生 我的英文名:Allen 和你们一样,是一名程序猿,专业技能  C#.前端小块.

  10. js,jq获取元素位置属性及兼容性写法

    网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop   //ie,谷歌浏览器和没有 ...