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. ios录音Demo

    <AudioToolbox/AudioToolbox.h> :这个库是C的接口,偏向于底层,主要用于在线流媒体的播放 <AVFoundation/AVFoundation.h> ...

  2. 使用IDEA的gradle整合spring+ mybatis 采用javaconfig配置

    1.新建一个工程 2.工程目录 3.添加gradle.propertes文件 activeMQVersion=5.7.0 aspectJVersion=1.7.2 commonsLangVersion ...

  3. Weexpack 使用教程

    简介 weexpack 是 weex 新一代的工程开发套件,是基于weex快速搭建应用原型的利器.它能够帮助开发者通过命令行创建weex工程,添加相应平台的weex app模版,并基于模版从本地.Gi ...

  4. ORACLE 12C 基础

    连接到PDB数据库 CMD窗口:sqlplus 用户名/密码@localhost:1521/PDB数据库名    示例:sqlplus xiaozijie/Abc4681101@localhost:1 ...

  5. git使用教程及github远程仓库管理

    git使用教程步骤 1.安装git 安装完后,在开始菜单里找到"git"->"Git Bash",蹦出一个类似命令行窗口,说明安装成功.2 注册git 在 ...

  6. 微信小程序-开发入门

    微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值 ...

  7. 使用github+hexo搭建博客笔记

    听说github上可以搭博客,而且不用自己提供空间和维护,哈哈哈 作为一名程序猿,github搭博客对我有种神奇的吸引力,赶紧动手试一试 关于如何使用hexo搭建博客网上好的教程多如牛毛,而且这篇博客 ...

  8. PRINCE2学习

    今天对PRINCE2中提及的7大主题进行学习,主要的内容是通过概述和PMBOK之间的对比做一些总结,每个主题所包含的过程和方法并没有太多涉及,没有对整个体系有全面深入的学习,有些断章取义的地方也请博友 ...

  9. JSTL 核心标签库 使用（转）

    在JSP的开发中,迭代是经常要使用到的操作.例如,逐行的显示查询的结果等.在早期的JSP中,通常使用Scriptlets来实现Iterator或者Enumeration对象的迭代输出.现在,通过JST ...

  10. 服务器中 配置phpstudy一键安装包

    在线phpstudy一键安装包    安装版: (很简单) wget -c http://lamp.phpstudy.net/phpstudy.bin  chmod +x phpstudy.bin   ...