猿问

按老师的步骤来的,为什么我的要隔好几秒才自动刷新(下面是js代码)(好像提错地方了)?

var RADIUS = 10;
var TOP = 60;
var LEFT = 30;
const endTime = new Date(2016,6,27,22,0,0);
var WIDTH = 1324;
var HEIGHT = 786;
var dur = 0;

window.onload = function(){

	var oC = document.getElementById("canvas");
	var oContext = oC.getContext("2d");
	oC.width = WIDTH;
	oC.height = HEIGHT;
	dur = getDuration();
	 setInterval(function(){
            render( oContext );
            update();
        } , 50
    );
	
}

function getDuration(){
	var curTime = new Date();
    var ret = endTime.getTime() - curTime.getTime();
    ret = Math.round( ret/1000 );

    return ret >= 0 ? ret : 0;
}
function update(){
	var nextTimeDur = getDuration();
	var nextHours = parseInt( nextTimeDur / 3600);
    var nextMinutes = parseInt( (nextTimeDur - nextHours * 3600)/60 );
    var nextSeconds = nextTimeDur % 60;

    var curHours = parseInt( dur / 3600);
    var curMinutes = parseInt( (dur - curHours * 3600)/60 );
    var curSeconds = dur % 60;

    if( nextSeconds != curSeconds ){
        dur = nextTimeDur;
    }
	//end = new Date().getTime();
}
function render(oContext){
	//start = new Date().getTime();
	oContext.clearRect(0,0,WIDTH,HEIGHT);
	
	var hour = parseInt(dur/3600);
	var min = parseInt((dur-hour*3600)/60);
	var sec = parseInt(dur%60);

	draw(TOP, LEFT, oContext, parseInt(hour/10));
	draw(TOP+15*(RADIUS+1), LEFT, oContext, parseInt(hour%10));

	draw(TOP+30*(RADIUS+1), LEFT, oContext, 10);

	draw(TOP+39*(RADIUS+1), LEFT, oContext, parseInt(min/10));
	draw(TOP+54*(RADIUS+1), LEFT, oContext, parseInt(min%10));

	draw(TOP+69*(RADIUS+1), LEFT, oContext, 10);

	draw(TOP+78*(RADIUS+1), LEFT, oContext, parseInt(sec/10));
	draw(TOP+93*(RADIUS+1), LEFT, oContext, parseInt(sec/10));
	
}
function draw(TOP, LEFT, oContext, num){
	oContext.fillStyle = "blue";
	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){
				oContext.beginPath();
				
				oContext.arc(TOP+RADIUS+1+j*2*(RADIUS+1), LEFT+RADIUS+1+i*2*(RADIUS+1), RADIUS, 0, 2*Math.PI);
				oContext.closePath();
				oContext.fill();
			}
		}
	}
}


哈喽姑娘
浏览 1545回答 1
1回答
随时随地看视频慕课网APP
我要回答