93 + 7 * 2 + 1 = 108;
93 是最后一个秒钟个位数字的起始 x 位置;
7 * 2 + 1 是最后一个秒针个位数字所占空间;
两种解决方式:
第1种css中
html, body{ margin:0; height:100%; }
第2种js修改
WINDOW_WIDTH = document.documentElement.clientWidth;
WINDOW_HEIGHT = document.documentElement.clientHeight;
const targetTime = new Date("2018/08/13 12:00:00");
目标时间这样设置,不要设置成视频中的格式
居然是把index的文件里改成:
<body style="height:100%">
<canvas id="canvas" style="width:100%;height:100%">
WINDOW_WIDTH = window.screen.width;
WINDOW_HEIGHT = window.screen.height ;
这个更准确 不用撑开dom节点就能用
语言环境是正确的吗,vs2013是c++的那个编辑器吗,应该不太适用这里吧
我们没明白你这样做的理由是什么
WINDOW_WIDTH和WINDOW_HEIGHT在后面的函数中也会调用,只定义在这一个函数里面后面函数调用的时候会报错说WINDOW_WIDTH和WINDOW_HEIGHT没有定义,所以没有效果。
检查下有没有给curShowTimeSeconds赋getCurrentShowTimeSeconds()这个初始值
说了画布文字占屏幕的5分之4
只需要判断两个小球之间的距离,是否小于两球直径之和,小于则重叠了。
index的文件里改成这样<body style="height:100%">
<canvas id="canvas" style="width:100%;height:100%">
性能优化function updateBalls(){
for( var i = 0 ; i < balls.length ; i ++ ){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
if( balls[i].y >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = - balls[i].vy*0.75;
}
}
var cnt = 0
for( var i = 0 ; i < balls.length ; i ++ )
if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < WINDOW_WIDTH )
balls[cnt++] = balls[i]
while( balls.length > Math.min(300,cnt) ){
balls.pop();
}
}
<!DOCTYPE html style="height:100%;">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
index的文件里改成这样<body style="height:100%">
<canvas id="canvas" style="width:100%;height:100%">
setInterval(
function(){
curTime = new Date();
hour = curTime.getHours();
minute = curTime.getMinutes();
seconds = curTime.getSeconds();
render(context);
},
20 //这个数字,代表的就是多少ms刷新一次,改这里即可,可以试试看
);
把html文件顶部的<!DOCTYPE html PUBLIC xxxxxxxx省略xxxxxxxxx> 删掉应该可以解决这个问题。
我也因为很蛋疼的语法问题出过这种错误,不知道专业程序员是怎么调试的,我自己是把老师的代码复制过来,一点点替换成自己的代码,然后看到哪一步出错了。
<html style="height:100%">html标签也要加样式
HTML标签加一个height:100% 就可以了 记得点赞哦
试试这样WINDOW_HEIGHT = document.documentElement.clientHeight
清除margin和padding没什么用,overflow应该会让底部的小球只能显示部分,理解一下所谓的document.documentElement.clientHeight,无非是获得了可见区域的高度,而产生滚动条的原因是获得的高度有点大了,这样就稍微给他减小点就是咯,我减了30就不会有滚动条了
我是这样写的,可以实现全屏显示
获得屏幕宽度和高度应该写成这样:document.documentElement.clientWidth
document.documentElement.clientHeight
你可以监听window的resize事件,如果改变,重新绘制~
谢谢,你的回答完美的解决了我的问题
你把document.body.clientHeight改为document.documentElement.clientHeight,就能完全显示。
根据自己的屏幕高度修改Canvas的高度