倒计时.html
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <!--<script src="countdown.js"></script>--> 7 <script src="digit.js"></script> 8 <script type="text/javascript"> 9 window.onload = function () { 10 var canvas = document.getElementById("canvas"); 11 var context = canvas.getContext("2d"); 12 canvas.width = 1200; 13 canvas.height = 500; 14 15 16 setInterval( 17 function () { 18 //清除画布 19 context.clearRect(50, 0, 1200, 500); 20 var myDate = new Date(); 21 var hour = myDate.getHours(); 22 var min = myDate.getMinutes(); 23 var sec = myDate.getSeconds(); 24 timer(50, parseInt(hour / 10), context); 25 timer(200, hour % 10, context); 26 timer(350, 10, context);//冒号 27 timer(440, parseInt(min / 10), context); 28 timer(590, min % 10, context); 29 timer(740, 10, context);//冒号 30 timer(830, parseInt(sec / 10), context); 31 timer(980, sec % 10, context); 32 }, 1000 33 ); 34 } 35 //x为圆心x轴位置，num为0~9和冒号，context是canvas画图方法 36 function timer(x, num, context) { 37 for (var i = 0; i < 10; i++) { 38 for (var j = 0; j < 7; j++) { 39 if (digit[num][i][j] == 1) { 40 context.beginPath(); 41 context.arc(x + 20 * j, 20 + 20 * i, 5, 0, 2 * Math.PI); 42 context.fillStyle = "cyan"; 43 context.stroke(); 44 context.fill(); 45 } 46 } 47 } 48 } 49 50 </script> 51 </head> 52 <body> 53 <canvas id="canvas" style="border: 1px solid red;display:block; margin: 50px auto;"></canvas> 54 55 </body> 56 </html>