为什么我倒计时时间的最后一个初始数字会一直存在,比如4到2,倒数到3时,3和4同时存在,2也是和4同时存在,4一直在,不会消除
var window_width = 1024;
var window_height = 768;
var radius = 8;
var margin_top = 60;
var margin_left = 30;
const endTime = new Date(2017, 3, 26 ,13,12,12);
var curShowTimeSeconds = 0;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = window_width;
canvas.height = window_height;
curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(
function(){
render( context );
update();
},50
);
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000 );
return ret >= 0 ? ret: 0 ;
};
function update(){
var nextShowTimeSeconds = getCurrentShowTimeSeconds();
var nextHours = parseInt( nextShowTimeSeconds /3600);
var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours *3600)/60);
var nextSeconds = nextShowTimeSeconds %60;
var curHours = parseInt( curShowTimeSeconds /3600);
var curMinutes = parseInt( (curShowTimeSeconds - curHours *3600)/60);
var curSeconds = curShowTimeSeconds %60;
if( nextSeconds != curSeconds){
curShowTimeSeconds = nextShowTimeSeconds;
};
};
function render( context ) {
context.beginPath();
context.clearRect(0,0,window_width, window_height);
var hours = parseInt( curShowTimeSeconds /3600);
var minutes = parseInt( (curShowTimeSeconds - hours *3600)/60);
var seconds = curShowTimeSeconds %60;
renderDigit( margin_left, margin_top, parseInt(hours/10), context );
renderDigit( margin_left = 19*(radius+1) , margin_top , parseInt(hours%10) , context);
renderDigit( margin_left = 34*(radius+1) , margin_top, 10 ,context);
renderDigit( margin_left = 43*(radius+1) , margin_top , parseInt(minutes/10) , context);
renderDigit( margin_left = 58*(radius+1) , margin_top , parseInt(minutes%10) , context);
renderDigit( margin_left = 73*(radius+1) , margin_top, 10 ,context);
renderDigit( margin_left = 82*(radius+1) , margin_top , parseInt(seconds/10) , context);
renderDigit( margin_left = 97*(radius+1) , margin_top , parseInt(seconds%10) , context);
};
function renderDigit ( x, y, num, context ){
for ( var i = 0; i < digit[num].length ; i++){
for ( var j = 0; j < digit[num][i].length ; j++){
if( digit[num][i][j] == 1){
context.beginPath();
context.arc( x+j*2*(radius+1)+(radius+1) , y+i*2*(radius+1)+(radius+1) , radius, 0, 2*Math.PI);
context.closePath();
context.fillStyle = "pink";
context.fill();
};
};
};
};