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();//获得当前时间
render(context);//绘制当前的canvas画布
}
function getCurrentShowTimeSeconds(){
var curTime=new Date();//得到当前的时间
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret >=0 ? ret : 0;
}
function render(cxt){
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();
}
}
改成这样：
const endTime = new Date(2017,9,1,9,0);
var curShowTimeSeconds = 0;//存储自1970年0时0分0秒到现在的毫米数，初始化为0；
var windowWidth = 1024;
var windowHieght = 768;
var R = 8;
var marginTop = 60;
var marginLeft = 30;
// var c = document.getElementById("clock");
// var context = c.getContext('2d');
//window.onload = function () {
var canvas = document.getElementById("clock");
var ctx = canvas.getContext('2d');
canvas.width = windowWidth;
canvas.height = windowHieght;
curShowTimeSeconds = getCurrentShowTimeSeconds();
render(ctx);
//};
function render(cxt) {
var hours = parseInt(curShowTimeSeconds / 3600);//总秒数除以3600秒，强制类型转换
var minutes = parseInt((curShowTimeSeconds - hours *3600)/60);//总时间减去小时的秒数，除以60秒，强制类型转换
var seconds = curShowTimeSeconds % 60;//总时间除以60为分钟数，其的余数为秒数
//console.log("ds");
renderDigit(marginLeft,marginTop,parseInt(hours/10),cxt);
renderDigit(15*(R+1)+marginLeft,marginTop,parseInt(hours%10),cxt);
renderDigit(30*(R+1)+marginLeft,marginTop,10,cxt);
//hours
renderDigit(39*(R+1)+marginLeft,marginTop,parseInt(minutes/10),cxt);
renderDigit(54*(R+1)+marginLeft,marginTop,parseInt(minutes%10),cxt);
renderDigit(69*(R+1)+marginLeft,marginTop,10,cxt);
//minutes
renderDigit(78*(R+1)+marginLeft,marginTop,parseInt(seconds/10),cxt);
renderDigit(93*(R+1)+marginLeft,marginTop,parseInt(seconds%10),cxt);
//seconds
}
function renderDigit(x,y,num,ctx) {
ctx.fillStyle = "rgb(0,102,153)";
console.log(digit[num].length);
for (var i = 0;i<digit[num].length;i++){//遍历所有数字的点阵
//console.log(digit[num][i]);
for (var j = 0;j<digit[num][i].length;j++){//遍历所有点阵中的点
if (digit[num][i][j] === 1){
ctx.beginPath();
ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
// 圆的margin为2，每个圆在一个格子中，圆的半径为R
// 格子边长为2*(R+1);i为y坐标，j为x坐标；第(i,j)个圆的圆心位置：(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1))
ctx.closePath();
ctx.fill();
}
}
}
}
function getCurrentShowTimeSeconds() {
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000);
return ret >=0 ? ret:0;
}遇到一样的问题，怎么解决的，亲们
时间没有替换，不要照着老师的时间写
const endTime=new Date(2014,6,11,18,47,52);
换成const endTime=new Date(2017,2,22,18,47,52);
请问是怎么解决的 const endTime = new Date("2017/1/27,18:47:52");
我的页面显示还是为00:00:00
是怎么解决的呢
已解决