[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果 - ghostwu(2)_H5之家

1 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script src="./num.js"></script> 9 <script> 10 window.onload = function () { 11 var oCanvas = document.querySelector("#canvas"), 12 oGc = oCanvas.getContext('2d'), 13 width = oCanvas.width, height = oCanvas.height, 14 radius = 10, 15 leftTime = 0, 16 endTime = new Date( 2017, 09, 10, 15, 30, 02 ); 17 18 leftTime = getLeftTime(); 19 showTime( oGc ); 20 setInterval(function(){ 21 oGc.clearRect( 0, 0, width, height ); 22 leftTime = getLeftTime(); 23 showTime( oGc ); 24 }, 1000); showTime( cxt ){ 27 var hour = parseInt( leftTime / 3600 ); 28 var min = parseInt( ( leftTime - hour * 3600 ) / 60 ); 29 var sec = leftTime % 60; 30 31 showNum( 0, 0, parseInt( hour / 10 ), cxt ); 32 showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt ); 33 showNum( 30 * ( radius + 1 ), 0, 10, cxt ); 34 showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt ); 35 showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt ); 36 showNum( 69 * ( radius + 1 ), 0, 10, cxt ); 37 showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt ); 38 showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt ); 39 } getLeftTime(){ 42 var curTime = new Date(); 43 var restTime = endTime.getTime() - curTime.getTime(); 44 restTime = Math.round( restTime / 1000 ); 45 return restTime > 0 ? restTime : 0; 46 } showNum( x, y, num, cxt ){ 50 cxt.fillStyle = '#09f'; 51 for( var i = 0; i < digital[num].length; i++ ){ 52 for( var j = 0; j < digital[num][i].length; j++ ){ 53 if ( digital[num][i][j] == 1 ){ 54 cxt.beginPath(); 55 cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false ); 56 cxt.closePath(); 57 cxt.fill(); 58 } 59 } 60 } 61 } 62 } 63 </script> 64 </head> 65 <body> 66 <canvas></canvas> 67 </body>

run code

这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了