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>
相关文章
这篇文章主要为大家详细介绍了js实现上下滑动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
本文为大家介绍下javascript中普通函数的使用，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-12
本文的重点在于讨论bind()方法的实现，在开始讨论bind()的实现之前，我们先来看看bind()方法的使用，有需要的小伙伴可以参考下。2015-05-05
本文主要介绍了通过js实现页面的倒计时功能的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
在开发中常常会需要截取字符串,而 JavaScript 提供了很多种方法实现截取操作,本文主要介绍了JavaScript中切割截取字符串的7种方法,感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了javascript属性访问表达式用法,实例分析了javascript属性访问表达式的功能与使用方法,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了canvas操作插件fabric.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要为大家详细介绍了BootStrap表单的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论