請老師幫忙看下為什么我的代碼會20秒才刷新一次
canvas_clock.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="20">
<meta charset="utf-8">
<title>使用canvas實現各種效果</title>
<script type="text/javascript" src="../js/canvas.js"></script>
<script type="text/javascript" src="../js/digit.js"></script>
</head>
<body>
<canvas width="1000px" height="800px" id="canvas">
</canvas>
<script type="text/javascript">
</script>
</body>
</html>
-----------------------------------
canvas.js
var WINDOW_WIDTH=1000;
var WINDOW_HEIGHT = 800;
var RADIUS = 8;
var curTime = new Date();
var hour = curTime.getHours();
var minute = curTime.getMinutes();
var seconds = curTime.getSeconds();
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
setInterval(
function(){
render(context);
},20);
render(context);
}
function render(cxt){
cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
renderDight(cxt,parseInt(hour/10),0);
renderDight(cxt,parseInt(hour%10),15);
renderDight(cxt,10,30);
renderDight(cxt,parseInt(minute/10),39);
renderDight(cxt,parseInt(minute%10),54);
renderDight(cxt,10,69);
renderDight(cxt,parseInt(seconds/10),78);
renderDight(cxt,parseInt(seconds%10),93);
}
function renderDight(cxt,num,pos){
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(pos*(RADIUS+1)+j*2*(RADIUS+1)+(RADIUS+1),i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
// function update(){
// var nextTime = new Date();
// var nextHours = nextTime.getHours();
// var nextMinutes = nextTime.getMinutes();
// var nextSeconds = nextTime.getSeconds();
// if(parseInt(nextSeconds/10) != parseInt(seconds/10)){
// }
// if(parseInt(nextSeconds%10) != parseInt(seconds%10)){
// }
// }
----------------------
digit.js
var digit =
? ? [
? ? ? ? [ ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? [0,0,1,1,1,0,0],
? ? ? ? ? ? [0,1,1,0,1,1,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,0,1,1,0],
? ? ? ? ? ? [0,0,1,1,1,0,0]
? ? ? ? ],//0
? ? ? ? [
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,1,1,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [1,1,1,1,1,1,1]
? ? ? ? ],//1
? ? ? ? [
? ? ? ? ? ? [0,1,1,1,1,1,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,1,1,0,0,0],
? ? ? ? ? ? [0,1,1,0,0,0,0],
? ? ? ? ? ? [1,1,0,0,0,0,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,1,1,1,1,1]
? ? ? ? ],//2
? ? ? ? [
? ? ? ? ? ? [1,1,1,1,1,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,1,1,1,0,0],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,1,1,1,0]
? ? ? ? ],//3
? ? ? ? [
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,1,1,1,0],
? ? ? ? ? ? [0,0,1,1,1,1,0],
? ? ? ? ? ? [0,1,1,0,1,1,0],
? ? ? ? ? ? [1,1,0,0,1,1,0],
? ? ? ? ? ? [1,1,1,1,1,1,1],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,1,1,1,1]
? ? ? ? ],//4
? ? ? ? [
? ? ? ? ? ? [1,1,1,1,1,1,1],
? ? ? ? ? ? [1,1,0,0,0,0,0],
? ? ? ? ? ? [1,1,0,0,0,0,0],
? ? ? ? ? ? [1,1,1,1,1,1,0],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,1,1,1,0]
? ? ? ? ],//5
? ? ? ? [
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,1,1,0,0,0],
? ? ? ? ? ? [0,1,1,0,0,0,0],
? ? ? ? ? ? [1,1,0,0,0,0,0],
? ? ? ? ? ? [1,1,0,1,1,1,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,1,1,1,0]
? ? ? ? ],//6
? ? ? ? [
? ? ? ? ? ? [1,1,1,1,1,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,0,1,1,0,0,0],
? ? ? ? ? ? [0,0,1,1,0,0,0],
? ? ? ? ? ? [0,0,1,1,0,0,0],
? ? ? ? ? ? [0,0,1,1,0,0,0]
? ? ? ? ],//7
? ? ? ? [
? ? ? ? ? ? [0,1,1,1,1,1,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,1,1,1,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,1,1,1,0]
? ? ? ? ],//8
? ? ? ? [
? ? ? ? ? ? [0,1,1,1,1,1,0],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [1,1,0,0,0,1,1],
? ? ? ? ? ? [0,1,1,1,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,0,1,1],
? ? ? ? ? ? [0,0,0,0,1,1,0],
? ? ? ? ? ? [0,0,0,1,1,0,0],
? ? ? ? ? ? [0,1,1,0,0,0,0]
? ? ? ? ],//9 ? ?10*7
? ? ? ? [
? ? ? ? ? ? [0,0,0,0],
? ? ? ? ? ? [0,0,0,0],
? ? ? ? ? ? [0,1,1,0],
? ? ? ? ? ? [0,1,1,0],
? ? ? ? ? ? [0,0,0,0],
? ? ? ? ? ? [0,0,0,0],
? ? ? ? ? ? [0,1,1,0],
? ? ? ? ? ? [0,1,1,0],
? ? ? ? ? ? [0,0,0,0],
? ? ? ? ? ? [0,0,0,0]
? ? ? ? ]//: ? ? 10*4
? ? ];
2016-07-14
setInterval(
function(){
curTime = new Date();
hour = curTime.getHours();
minute = curTime.getMinutes();
seconds = curTime.getSeconds();
render(context);
},
20 ? //這個數字，代表的就是多少ms刷新一次，改這里即可，可以試試看
);
2016-07-07
需要在定時方法中重新獲取當前時間
setInterval(
function(){
curTime = new Date();
hour = curTime.getHours();
minute = curTime.getMinutes();
seconds = curTime.getSeconds();
render(context);
},20);