html5 canvas js(数字时钟)

 <!doctype html>

 <html>

     <head>

         <title>canvas dClock</title>

     </head>

     <body>

         <canvas id = "clock" width = "500px" height = "200px">

             您的浏览器太古董了，升级吧！

         </canvas>

         <script type = "text/javascript">

             var clock = document.getElementById("clock");

             var cxt = clock.getContext("2d");

             //显示数字时钟

             function showTime(m, n) {

                 cxt.clearRect(0, 0, 500, 500);

                 var now = new Date;

                 var hour = now.getHours();

                 var min = now.getMinutes();

                 var sec = now.getSeconds();

                 var msec = now.getMilliseconds();

                 hour = hour >= 10 ? hour : "0" + hour;

                 min = min >= 10 ? min : "0" + min;

                 sec = sec >= 10 ? sec : "0" + sec;

                 msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;

                 bdigital(m, n, hour);

                 bdigital(m + 160, n, min);

                 bdigital(m + 320, n, sec);

                 //tdigital(m + 480, n, msec);

                 //三位数的显示

                 function tdigital(x, y, num) {

                     var ge = num % 10;

                     var shi = (parseInt(num / 10)) % 10;

                     var bai = parseInt((parseInt(num / 10)) / 10) % 10;

                     digital(x, y, bai);

                     digital(x + 70, y, shi);

                     digital(x + 140, y, ge);

                 }

                 //两位数的显示

                 function bdigital(x, y, num) {

                     var ge = num % 10;

                     var shi = (parseInt(num / 10)) % 10;

                     digital(x, y, shi);

                     digital(x + 70, y, ge);

                 }

                 //画：

                 //小时与分钟之间

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 cxt.fillStyle = "#000";

                 cxt.beginPath();

                 cxt.arc(m + 140, n + 80, 3, 0, 360, false);

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 cxt.fillStyle = "#000";

                 cxt.beginPath();

                 cxt.arc(m + 140, n + 100, 3, 0, 360, false);

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 //分钟与秒之间

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 cxt.fillStyle = "#000";

                 cxt.beginPath();

                 cxt.arc(m + 300, n + 80, 3, 0, 360, false);

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 cxt.fillStyle = "#000";

                 cxt.beginPath();

                 cxt.arc(m + 300, n + 100, 3, 0, 360, false);

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 //秒与毫秒之间一个.

 //                cxt.lineWidth = 5;

 //                cxt.strokeStyle = "#000";

 //                cxt.fillStyle = "#000";

 //                cxt.beginPath();

 //                cxt.arc(m + 460, n + 100, 3, 0, 360, false);

 //                cxt.fill();

 //                cxt.closePath();

 //                cxt.stroke();

             }

             //显示一位数字

             function digital(x, y, num) {

                 //设置风格

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 //a

                 function a() {

                     cxt.beginPath();

                     cxt.moveTo(x, y);

                     cxt.lineTo(x + 50, y);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //b

                 function b() {

                     cxt.beginPath();

                     cxt.moveTo(x + 55, y + 5);

                     cxt.lineTo(x + 55, y + 55);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //c

                 function c() {

                     cxt.beginPath();

                     cxt.moveTo(x + 55, y + 60);

                     cxt.lineTo(x + 55, y + 110);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //d

                 function d() {

                     cxt.beginPath();

                     cxt.moveTo(x + 50, y + 115);

                     cxt.lineTo(x, y + 115);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //e

                 function e() {

                     cxt.beginPath();

                     cxt.moveTo(x - 5, y + 110);

                     cxt.lineTo(x - 5, y + 60);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //f

                 function f() {

                     cxt.beginPath();

                     cxt.moveTo(x - 5, y + 55);

                     cxt.lineTo(x - 5, y + 5);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //g

                 function g() {

                     cxt.beginPath();

                     cxt.moveTo(x, y + 57.5);

                     cxt.lineTo(x + 50, y + 57.5);

                     cxt.closePath();

                     cxt.stroke();

                 }

                 //0

                 function zero() {

                     a(); b(); c(); d(); e(); f();

                 }

                 //1

                 function one() {

                     b(); c();

                 }

                 //2

                 function two() {

                     a(); b(); d(); e(); g();

                 }

                 //3

                 function three() {

                     a(); b(); c(); d(); g();

                 }

                 //4

                 function four() {

                     b(); c(); f(); g();

                 }

                 //5

                 function five() {

                     a(); c(); d(); f(); g();

                 }

                 //6

                 function six() {

                     a(); c(); d(); e(); f(); g();

                 }

                 //7

                 function seven() {

                     a(); b(); c();

                 }

                 //8

                 function eight() {

                     a(); b(); c(); d(); e(); f(); g();

                 }

                 //9

                 function nine() {

                     a(); b(); c(); d(); f(); g();

                 }

                 //数字n

                 function number(n) {

                     switch (n) {

                         case 0: zero(); break;

                         case 1: one(); break;

                         case 2: two(); break;

                         case 3: three(); break;

                         case 4: four(); break;

                         case 5: five(); break;

                         case 6: six(); break;

                         case 7: seven(); break;

                         case 8: eight(); break;

                         case 9: nine(); break;

                     }

                 }

                 number(num);

             }

             showTime(1, 45);

             setInterval("showTime(1,45)", 1000);

         </script>

     </body>

 </html>

html5 canvas js(数字时钟)的更多相关文章

HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
[ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
html5 canvas js(时钟)
<!doctype html> <html> <head> <title>canvas</title> </head> < ...
js数字时钟
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
canvas+js实现时钟效果图
<! DOCTYPE html> <html> <head> <title>Clock</title> </head> < ...
16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

iOS App 审核被拒的原因搜罗
本文转载至 http://ju.outofmemory.cn/entry/108500 iOS app 审核 1.程序有重大bug,程序不能启动,或者中途退出. 2.绕过苹果的付费渠道,我们之前游 ...
mysql通过拷贝文件实现数据快速迁移实例
最近在做监控DB的迁移,由于数据量非常大,采用直接拷贝从机数据目录的方式,操作过程有几个注意事项,记录下来,以备后用: 操作步骤: 1.停掉从机的SQL线程,并将 innodb_max_dirty_p ...
习惯养成和目标追踪APP推荐
一.习惯和目标的不同习惯:贵在坚持,每天任务一定,而完成总量不定.坚持时间越久越好. 目标:贵在按时完成,任务总量一定,但是每天完成量不做限制.有一个完成期限,但是越早越好. 上面的差别导致了相关A ...
PAT 1018 Public Bike Management（Dijkstra 最短路）
1018. Public Bike Management (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...
AI篇6====>第一讲
1.人工智能小米:小爱百度:AI云平台科大讯飞AI平台 2.百度语音合成 # Author: studybrother sun from aip import AipSpeech #从文本到声音 ...
android studio 新建项目界面一直停在【“building ‘ 项目名’ gradle project info”】
安装了android studio 之后,按照上文所述的那篇博文下载安装gradle,配置环境变量, 启动android studio,新建项目,发现还是新建不了,界面一直停在 ["buil ...
Log4j 2
Log4j – Apache Log4j 2 - Apache Log4j 2 http://logging.apache.org/log4j/2.x/ Apache Log4j 2 Apache L ...
微信公众号拼团到期人数不足 db触发器 js触发器剥离
w注意当页面多个先后到期或同时到期的团时的用户体验 w保证了每次加载这个页面会是的过期的团不显示,马上到期的团会在页面存活期间进行页面更新和db操作: 但是这依赖了团状态值的更新必须依赖于有客户端页面 ...
利用jdt快速实现pmd的功能
jdt可以做语法树分析,并且支持visitor模式对代码进行分析.跟pmd的分析方式一样,我们只要实现 visitor接口即可实现一个插件. @Service("requestMapping ...
golang SQLite3性能测试
SQLite是个小型的数据库,很简洁,即支持文件也支持内存,比较适合小型的独立项目,在没有网络的时候做一些复杂的关系数据存储和运算. 为了考察性能做10M(1000万)条记录的测试,测试机4CPU.8 ...

html5 canvas js(数字时钟)

html5 canvas js(数字时钟)的更多相关文章

随机推荐

热门专题