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就像一 ...
随机推荐
- linux运维/自动化开发__目录
服务器软件安装 nginx apache php mysql oracle tomcat memcached mongodb sqlserver 常用pc端工具安装使用 Xshell ...
- hdu 1164:Eddy's research I（水题，数学题，筛法）
Eddy's research I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 修改Chem 3D模型的化学键属性的方法有哪些
很多的用户在绘制化学图形过程中发现很多的图形都是立体结构的,这个时候就需要用Chem3D,它是ChemOffice的核心组件之一,在绘制立体模型和计算化学数据方面具有不可替代的作用.虽然ChemDra ...
- SurvivalShooter学习笔记（七.玩家射击）
玩家射击:(这个脚本放在玩家的空子物体上,这个位置为枪口位置) 点击鼠标,玩家射击: 射击枪口发光,射击通过射线,方向有激光效果:(关于射线不明白可以参考Unity射线相关) 射击有射击音效 射击有每 ...
- SurvivalShooter学习笔记（一.相机跟随）
1.场景碰撞已好,地板需建一Quad去掉渲染留下碰撞,设置layer为Floor:用于建立摄像机朝向地面的射线,确定鼠标停留点,确定主角需要的朝向. 2.设置摄像机跟随主角: 本例中摄像机设置为正交模 ...
- ilbc编解码在android实现
iLBC 是为专为提供稳健的 IP 语音通信而开发的语音 codec,以窄带语音为设计基础,具有 8 kHz 的采样率.iLBC codec 支持两种基本的帧长度:13.3 kbps 比特率下编码帧长 ...
- Manacher模板，kmp，扩展kmp，最小表示法模板
*N]; //储存临时串 *N];//中间记录 int Manacher(char tmp[]) { int len=strlen(tmp); ; ;i<len;i++) { s[cnt++]= ...
- 巨蟒python全栈开发-第24天 内置常用模块3
一. 1.re模块基础知识 2.python模块&re正则模块 3.实战:re模块&python(链家&电影天堂&豆瓣) 复习:上节课重点(1)sys.path 模块的 ...
- Powershell ——findstr
从文件中找出关键字 $colItems = Get-ChildItem d:\test #定义文件夹的路径 foreach ($i in $colItems) #循环获取文件夹下的txt文件 { $f ...
- CoffeeScript编译手记
最近折腾bootstrap,看到一个Messager插件挺好的,可这丫的发出来的都是CoffeeScript的DEMO,顿时让我感觉自己已经落后了一百年. 于是各种搜索,各种脑补,原来Coffee最后 ...