複製程式碼 程式碼如下: canvas dClock 您的浏览器太古董了，升级吧！ <br> var clock = document.getElementById("clock");<br> var cxt = clock.getContext("2d"); <p> //显示数字时钟<br> function showTime(m, n) {<br> cxt.clearRect(0, 0, 500, 500);</p> <p> var now = new Date;<br> var hour = now.getHours();<br> var min = now.getMinutes();<br> var sec = now.getSeconds();<br> var msec = now.getMilliseconds();<br> hour = hour >= 10 ? hour : "0" + hour;<br> min = min >= 10 ? min : "0" + min;<br> sec = sec >= 10 ? sec : "0" + sec;<br> msec = (msec >= 10 && msec < 100) ? ("0" + msec) : (msec >= 0 && msec < 10) ? ("00" + msec) : msec;</P> <P> bdigital(m, n, hour);<BR> bdigital(m + 160, n, min);<BR> bdigital(m + 320, n, sec);<BR> //tdigital(m + 480, n, msec);</P> <P> //三位数的显示<BR> function tdigital(x, y, num) {<BR> var ge = num % 10;<BR> var shi = (parseInt(num / 10)) % 10;<BR> var bai = parseInt((parseInt(num / 10)) / 10) % 10;<BR> digital(x, y, bai);<BR> digital(x + 70, y, shi);<BR> digital(x + 140, y, ge);<BR> }</P> <P> //两位数的显示<BR> function bdigital(x, y, num) {<BR> var ge = num % 10;<BR> var shi = (parseInt(num / 10)) % 10;<BR> digital(x, y, shi);<BR> digital(x + 70, y, ge);<BR> }</P> <P> //画：<BR> //小时与分钟之间<BR> cxt.lineWidth = 5;<BR> cxt.strokeStyle = "#000";<BR> cxt.fillStyle = "#000";<BR> cxt.beginPath();<BR> cxt.arc(m + 140, n + 80, 3, 0, 360, false);<BR> cxt.fill();<BR> cxt.closePath();<BR> cxt.stroke();</P> <P> cxt.lineWidth = 5;<BR> cxt.strokeStyle = "#000";<BR> cxt.fillStyle = "#000";<BR> cxt.beginPath();<BR> cxt.arc(m + 140, n + 100, 3, 0, 360, false);<BR> cxt.fill();<BR> cxt.closePath();<BR> cxt.stroke();</P> <P> //分钟与秒之间<BR> cxt.lineWidth = 5;<BR> cxt.strokeStyle = "#000";<BR> cxt.fillStyle = "#000";<BR> cxt.beginPath();<BR> cxt.arc(m + 300, n + 80, 3, 0, 360, false);<BR> cxt.fill();<BR> cxt.closePath();<BR> cxt.stroke();</P> <P> cxt.lineWidth = 5;<BR> cxt.strokeStyle = "#000";<BR> cxt.fillStyle = "#000";<BR> cxt.beginPath();<BR> cxt.arc(m + 300, n + 100, 3, 0, 360, false);<BR> cxt.fill();<BR> cxt.closePath();<BR> cxt.stroke();</P> <P> //秒与毫秒之间一个.<BR>// cxt.lineWidth = 5;<BR>// cxt.strokeStyle = "#000";<BR>// cxt.fillStyle = "#000";<BR>// cxt.beginPath();<BR>// cxt.arc(m + 460, n + 100, 3, 0, 360, false);<BR>// cxt.fill();<BR>// cxt.closePath();<BR>// cxt.stroke();<BR> }</P> <P> //显示一位数字<BR> function digital(x, y, num) {<BR> //设置风格<BR> cxt.lineWidth = 5;<BR> cxt.strokeStyle = "#000";</P> <P> //a<BR> function a() {<BR> cxt.beginPath();<BR> cxt.moveTo(x, y);<BR> cxt.lineTo(x + 50, y);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //b<BR> function b() {<BR> cxt.beginPath();<BR> cxt.moveTo(x + 55, y + 5);<BR> cxt.lineTo(x + 55, y + 55);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //c<BR> function c() {<BR> cxt.beginPath();<BR> cxt.moveTo(x + 55, y + 60);<BR> cxt.lineTo(x + 55, y + 110);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //d<BR> function d() {<BR> cxt.beginPath();<BR> cxt.moveTo(x + 50, y + 115);<BR> cxt.lineTo(x, y + 115);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //e<BR> function e() {<BR> cxt.beginPath();<BR> cxt.moveTo(x - 5, y + 110);<BR> cxt.lineTo(x - 5, y + 60);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //f<BR> function f() {<BR> cxt.beginPath();<BR> cxt.moveTo(x - 5, y + 55);<BR> cxt.lineTo(x - 5, y + 5);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //g<BR> function g() {<BR> cxt.beginPath();<BR> cxt.moveTo(x, y + 57.5);<BR> cxt.lineTo(x + 50, y + 57.5);<BR> cxt.closePath();<BR> cxt.stroke();<BR> }</P> <P> //0<BR> function zero() {<BR> a(); b(); c(); d(); e(); f();<BR> }<BR> //1<BR> function one() {<BR> b(); c();<BR> }<BR> //2<BR> function two() {<BR> a(); b(); d(); e(); g();<BR> }<BR> //3<BR> function three() {<BR> a(); b(); c(); d(); g();<BR> }<BR> //4<BR> function four() {<BR> b(); c(); f(); g();<BR> }<BR> //5<BR> function five() {<BR> a(); c(); d(); f(); g();<BR> }<BR> //6<BR> function six() {<BR> a(); c(); d(); e(); f(); g();<BR> }<BR> //7<BR> function seven() {<BR> a(); b(); c();<BR> }<BR> //8<BR> function eight() {<BR> a(); b(); c(); d(); e(); f(); g();<BR> }<BR> //9<BR> function nine() {<BR> a(); b(); c(); d(); f(); g();<BR> }</P><P> // 数字<BR> 関数番号(n) {<BR> switch (n) {<BR> case 0: zero(); Break;<BR> case 1: one(); Break;<BR> ケース 2: two(); Break;<BR> case 3: three(); Break;<BR> case 4: four(); Break;<BR> case 5: four(); Break;<BR> case 6: six(); Break;<BR> case 7: seven(); Break;<BR> case 8: Eight(); Break;<BR> case 9: nine(); Break;<BR> }<BR> }<BR> number(num);<BR> }</P> <P> showTime(1, 45);<BR> setInterval("showTime(1,45)", 1000);<BR>
