为什么按着老师的代码打的,运行不报错,只倒计时,其他的什么特效都没显示啊,找了好久原因没找到-慕课网

首页课程实战体系课手记专栏慕课教程

为什么按着老师的代码打的,运行不报错,只倒计时,其他的什么特效都没显示啊,找了好久原因没找到

来源：4-3 华丽的小球滚动效果

qq_没做完的梦继续睡_04234114

2016-11-07 21:13

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

const endTime = new Date(2016,11,9,18,47,52);

var curShowTimeSeconds = 0

var balls=[];

const colors=['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00','#669900','#FFBB33','#FF8800','#FF4444','#CC0000'];

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();

}

);

}

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 ){

if(parseInt(curHours/10) != parseInt(nextHours/10)){

addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));

}

if(parseInt(curHours%10) != parseInt(nextHours%10)){

addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours/10));

}

if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){

addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));

}

if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){

addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));

}

if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){

addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));

}

if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){

addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextSeconds%10));

}

curShowTimeSeconds = nextShowTimeSeconds;

}

updateBalls();

}

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;

}

function addBalls(x,y,num){

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){

var aBall={

x:x+j*2*(RADIUS+1)+(RADIUS+1),

y:y+i*2*(RADIUS+1)+(RADIUS+1),

g:1.5+Math.random(),

vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,

vx:-5,

color:colors[Math.floor(Math.random()*colors.length)]

}

balls.push(aBall);

}

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);

for(var i=0;i<balls.length;i++){

cxt.fillStyle=balls[i].color;

cxt.beginPath();

cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);

cxt.closePath();

cxt.fill();

}

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()

}

<!DOCTYPE html>

<html>

<head>

</head>

当前浏览器不支持Canvas，请更换浏览器后再试

</canvas>

</body>

</html>

digit =

[

[0,0,1,1,1,0,0],

[0,1,1,0,1,1,0],

[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],

[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],

[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,1,1,1,1]

],//4

[

[1,1,1,1,1,1,1],

[1,1,0,0,0,0,0],

[1,1,1,1,1,1,0],

[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],

[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,1,1,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],

[0,1,1,1,1,1,0],

[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],

[0,1,1,1,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

[

[0,0,0,0],

[0,1,1,0],

[0,0,0,0],

[0,1,1,0],

[0,0,0,0],

[0,0,0,0]

]//:

];

写回答关注

4回答

迟夜

2018-08-02 20:56:49

我也是只有倒计时。。

0 0
珍惜当下慕课网

2017-04-17 19:26:03

什么问题，我也是只显示倒计时，没有小球效果

0 0
浴火重生之低调

2017-04-16 23:10:03

同样问题，求教

0 0
qq_没做完的梦继续睡_04234114

2016-11-07 23:04:56

已解决

1 0

qq_鱼_4...

是哪里出了问题，我的也是只有倒计时，没有小球的效果

2018-06-13 15:26:19

共 1 条回复 >

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

96746 学习 · 1000 问题

查看课程

相似问题

找了好久都找不到错误啊....

回答 3

怎么什么都显示不出来啊？看了好几遍，都没找出错误在哪？

回答 3

倒计时正常，浏览器没报错，小球效果出不来，为什么呀

回答 4

按照老师写的代码在火狐以及IE还有EDGE浏览器打开都不正常显示，不知道什么原因

回答 3

为什么我到他显示出1的时候我的显示不出来

回答 3

打开慕课网App查看更多内容