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. CoreAnimation 寄宿图

    #CoreAnimation 寄宿图 寄宿图:图层中所包含的图 by:旭宝爱吃鱼 针对于寄宿图我在这里只讨论contents属性以及Custom Drawing. contents content:内 ...

  2. 多种语言开发Spark-以WordCount为例

    Spark是目前最火爆的大数据计算框架,有赶超Hadoop MapReduce的趋势.因此,趁着现在还有大多数人不懂得Spark开发的,赶紧好好学习吧,为了使不同的开发人员能够很好的利用Spark,S ...

  3. python list 切片实验

    list[start:stop:step] >>> a_list=['hito','bb','cc','dd','ee','ff']>>> a_list[::-1] ...

  4. web从入门开始(2)----基础

    HTML文件结构 <html> <head>//网页头标记 <title>放置标题</title> </head> <body> ...

  5. JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...

  6. .Net轻量级ORM-NPoco的使用方法-摘自NPoco国外官方Wiki

    文章引用自NPoco官方Wiki,地址:https://github.com/schotime/NPoco/wiki,因公司网络不稳定,有时无法访问,特将其摘抄. Home Adam Schroder ...

  7. Windows Phone下页面跳转动画的实现

    写在前面的一些废话: 前段时间一直忙于其他的事情,好长时间没有更新博客,很多东西虽然看过.学过,但是没有仔细去思考,去总结,长时间不用或者用的少难免会遗忘.最近由于家里以及感情方面的事,人也变得有点怨 ...

  8. HTML阶段总结

    自学有两个多星期了,这段时间主要在学习HTML基础知识,万事开头难,刚开始根本没法上手,云里雾里的,没有清晰的思路和详细的学习计划.问了一些盆友,找了一些资料,找到了适合自己的学习方法,渐渐的进入了轨 ...

  9. Centos6.8 安装 nginx

    rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6.ngx.noarch.rpm ...

  10. SQL Server 给表和字段添加说明

    .添加表说明 EXECUTE sp_addextendedproperty N'MS_Description','表说明',N'user',N'dbo',N'table',N'表名',NULL,NUL ...