html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
<!doctype html>
<html>
<head>
<title>canvas dClock</title>
</head>
<body>
<canvas id = "clock" width = "500px" height = "200px">
您的瀏覽器太古董了，升級(jí)吧！
</canvas>
<script type = "text/javascript">
var clock = document.getElementById("clock");
var cxt = clock.getContext("2d");
//顯示數(shù)字時(shí)鐘
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);
//三位數(shù)的顯示
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);
}
//兩位數(shù)的顯示
function bdigital(x, y, num) {
var ge = num % 10;
var shi = (parseInt(num / 10)) % 10;
digital(x, y, shi);
digital(x + 70, y, ge);
}
//畫：
//小時(shí)與分鐘之間
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();
//秒與毫秒之間一個(gè).
// 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();
}
//顯示一位數(shù)字
function digital(x, y, num) {
//設(shè)置風(fēng)格
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();
}
//數(shù)字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>
- 純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
- JavaScript+html5 canvas實(shí)現(xiàn)圖片破碎重組動(dòng)畫特效
- 教你用幾十行js實(shí)現(xiàn)很炫的canvas交互特效
- js canvas實(shí)現(xiàn)星空連線背景特效
- js canvas實(shí)現(xiàn)隨機(jī)粒子特效
- javascript結(jié)合html5 canvas實(shí)現(xiàn)(可調(diào)畫筆顏色/粗細(xì)/橡皮)的涂鴉板
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
- js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
- JavaScript+html5 canvas實(shí)現(xiàn)本地截圖教程
- JS+Canvas 實(shí)現(xiàn)下雨下雪效果
- js和canvas繪制圓形金屬質(zhì)感特效
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上下滑動(dòng)輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
本文為大家介紹下javascript中普通函數(shù)的使用，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12
在JavaScript中正確引用bind方法的應(yīng)用
本文的重點(diǎn)在于討論bind()方法的實(shí)現(xiàn)，在開始討論bind()的實(shí)現(xiàn)之前，我們先來看看bind()方法的使用，有需要的小伙伴可以參考下。2015-05-05
純js實(shí)現(xiàn)倒計(jì)時(shí)功能
本文主要介紹了通過js實(shí)現(xiàn)頁面的倒計(jì)時(shí)功能的思路與方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
在開發(fā)中常常會(huì)需要截取字符串,而 JavaScript 提供了很多種方法實(shí)現(xiàn)截取操作,本文主要介紹了JavaScript中切割截取字符串的7種方法,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了javascript屬性訪問表達(dá)式用法,實(shí)例分析了javascript屬性訪問表達(dá)式的功能與使用方法,需要的朋友可以參考下2015-04-04
JS+CSS3實(shí)現(xiàn)的簡(jiǎn)易鐘表效果示例
這篇文章主要介紹了JS+CSS3實(shí)現(xiàn)的簡(jiǎn)易鐘表效果,涉及JavaScript結(jié)合定時(shí)器的頁面元素動(dòng)態(tài)設(shè)置與數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了canvas操作插件fabric.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細(xì)介紹了BootStrap表單的制作代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03