巨好看的丑娃
我跟你一模一样,原因就是
curShowTimeSeconds = getCurrentShowTimeSeconds();
render(context);
这两个方法的顺序写反了导致render里面的curShowTimeSeconds是错的
Takm
试试把天数改成比现在的天数大
11YLX
估计是计算的时候缺少少括号
不能说的
最重要的一点是:你的月份要比当前月份小一,比如现在是7月,你就该写6月。。。因为js月份是从零开始的
慕粉3191377
右侧“资料下载”
qq_维也纳的秋天_0
慕容0017461
代码贴上看下呢
qq_GreenOrRed_0
curShowTimeSeconds%60取余数,得到的余数就是不足1分钟的秒数,就是最后要显示的秒数
唐唐唐
const endTime = new Date("2017/1/27,18:47:52");
时间格式错误,已经解决,下面是改过的时间
const endTime = new Date(2017,1,27,18,47,52);
唐唐唐
new Date("2017/1/27,18:47:52"); 去掉引号试试 加了引号变字符串了
huangli005
JS的一个坑,setInterval设置1000的间隔,你以为是一秒钟,但它实际运行时很有可能不是1000毫秒。具体的可以查阅相关书籍文档。
qq_惠明橙空_0
那个自己写的那个日期,定义的日期,不能和当前日期相差太多,因为那个位置只能放2位数,如果相差太多,超过了2位数的话会出错的
详情的话可以看一下5-3那节,你就知道怎么回事了
慕后端9506282
规定的就是毫秒
就像C语言中Sleep(1000)一样也是毫秒
是规定 不要钻牛角尖
qq_慕仙5112977
已经解决了
梦林苑3290767
...
成长前端初学者
时间没有替换,不要照着老师的时间写
const endTime=new Date(2014,6,11,18,47,52);
换成const endTime=new Date(2017,2,22,18,47,52);
qq_秋忆_0
const endTime=new Date(2016,9,5,15,22,54);
时间设置的太长了,得设置成距离当前时间99小时以内
例如改成:const endTime=new Date(2016,8,3,15,22,54);这代表着2016年9月3号15时22分54秒
JavaScript的Date 的月份设置中 0代表1月,1代表2月,2代表3月。。。。11代表12月,12。。。报错;详情请参考javascriptAPI
慕粉1470740819
// JavaScript Document
//window.width =1024;
//window.height =768;
//窗口的处理更加的方便
/*
var WINDOW_WIDTH =1024;
var WINDOW_HEIGHT =768;
var RADIUS =8;
var MARGIN_LEFT =30;
var MARGIN_TOP =60;
const endTime =new Date("2016-07-26 18:20:30");
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();
}
}
*/
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;
const endTime = new Date(2016,7,26,22,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 )
}
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()
}
}
泽泽222
var ret = endTime.getTime() - curTime.getTime();你好像写反了
qq_晚安_0
这个问题可以通过设置const endTime=new Date("2016/06/24 18:47:52");解决,日期是用引号括起来而不是用逗号隔开,而且应该大于当前时间
C阳0
不动的原因是,这个时钟是倒计时,所以你设定的oTime一定要是在此刻以后的时间,你设置的是4月14日,明显已经过去了,验证这两个时间差值<0,所以当然不动了
二师弟
setInterval(
function(){
render(context);
},
1000
);
这样就ok了
之前学setInterval是说可以setInterval(render,1000);或者setInterval("render(context)",1000);
但是这里不行,感觉是因为render这个函数有参数的原因
Forget_淡忘
digit[]这个数组你没正确引入或者数组名出错
liulin60
不好好听课,说了小时只能显示99小时,也就是倒计时超过99小时就没法显示了。所有你的倒计时间得在4天之内
yb2015
因为是得到的所有的毫秒时间段,比如总共1*60*60*1000+20*60*1000+5*1000=1小时20分钟5秒,等于3631000ms。怎样取得20分钟呢,就得减去前面的小时数,算出含有多少个60*1000分钟数,才能得出分钟数,
yb2015
因为curShowTimeSeconds是表示的总的秒数
Andonny
const endTime = new Date('2016/3/5,12:45:45'); 这样定义就不会错了
慕UI0851990
超过四天就会报错
哦oo
const声明创建一个常量。需要被初始化。而常量的值不能通过再赋值改变,也不能再次声明。一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称。也就是说一旦初始化const声明的变量,那么在这个常量有效期间不能被覆盖替代,不能被重新更改。所以此次声明截至时间用const,是为了保证这个终止时间的不会被其他变量覆盖,从而保证倒计时的正常运行。
淡月暗香
解决了,理解错了endTime了,应该设置大于当前时间才行。