为什么直接使用setInterval(getCurrentShowTimeSeconds(),50)不行？
如题？这节课的原理到底是啥？按道理，直接设置定时器那不就会动了吗？
飞天意大利面神兽
2016-07-13
5 回答
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="digit.js"></script> <script type="text/javascript" src="my_1.js"></script> <body> <canvas id="canvas" style="border: 1px solid gray;margin: 50px auto;display: block;"> 当前浏览器不支持Canvas，请更换浏览器再试 </canvas> </body> </html>
var r=6;
var wd=120;
var showtime;
const endTime=new Date(2016,6,14,18,47,52);
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.height=768;
canvas.width=1366;
setInterval(function(){
MyTime(context)
}
,50);
}
function MyTime(ct){
var nowtime=new Date();
var showtime=endTime.getTime()-nowtime.getTime();
if(showtime<=0){
showtime=0;
}
showtime=Math.round(showtime/1000);
var hours=parseInt(showtime/3600),
minutes=parseInt((showtime/60)%60),
seconds=parseInt(showtime%60);
console.log('一'+hours);
console.log('二'+minutes);
console.log('三'+seconds);
mycanvas(0,0,ct,parseInt(hours/10));
mycanvas(wd,0,ct,parseInt(hours%10));
mycanvas(wd*2,0,ct,10);
mycanvas(wd*3,0,ct,parseInt(minutes/10));
mycanvas(wd*4,0,ct,parseInt(minutes%10));
mycanvas(wd*5,0,ct,10);
mycanvas(wd*6,0,ct,parseInt(seconds/10));
mycanvas(wd*7,0,ct,parseInt(seconds%10));
}
function mycanvas(X,Y,ct,num){
ct.fillStyle='red';
for(var y=0;y<digit[num].length;y++)
for(var x=0;x<digit[num][y].length;x++){
if(digit[num][y][x]==1){
ct.beginPath();
ct.arc(X+x*(r+2)*2+(r+2),Y+y*(r+2)*2+(r+2),r,0,2*Math.PI);
ct.closePath();
ct.fill();
}
}
}var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
const endTime = new Date(2014,6,11,18,47,52);
var curShowTimeSeconds = 0
window.onload = function(){
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( cxt ){
cxt.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) , cxt )
renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )
renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )
renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);
renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);
renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);
}
function renderDigit( x , y , num , cxt ){
cxt.fillStyle = "rgb(0,102,153)";
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 ){
cxt.beginPath();
cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI )
cxt.closePath()
cxt.fill()
}
}举报
0/150
提交
取消
