curSeconds与nextSeconds相等，数组添加失败
请问一下老师，setIntval的update方法中，获取下次刷新时间nextSeconds应该会比curSeconds稍微快一些，但是现在curSeconds与nextSeconds相等，导致添加小球进数组的方法进不去，只有倒计时效果，小球掉落效果偶尔会出现，请问老师应该怎么修改代码呢。
var width = 1920;
var height = 768;
var R = 6;
var r = 8;
var DAY_MARGIN_LEFT = 10;
var DAY_MARGIN_TOP = 10;
var MARGIN_LEFT = 400;
var MARGIN_TOP = 200;
const endTime = new Date(2018, 7, 18, 0, 0, 0);
var curShowTimeSeconds = 0;
var littleLemon = [];
const colors = ["rgba(255,241,0,1)", "rgba(50,205,50,1)", "rgba(0,255,0,1)"];
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
curShowTimeSeconds = getCurrentShowTimeSeconds();
setInterval(
function () {
render(context);
update();
}
,
24
);
}
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 nextDay = parseInt(nextShowTimeSeconds / 86400);
var nextHours = parseInt((nextShowTimeSeconds - nextDay * 86400) / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds - (nextDay * 86400) - (nextHours * 3600)) / 60);
var nextSeconds = nextShowTimeSeconds % 60;
var curDay = parseInt(curShowTimeSeconds / 86400);
var curHours = parseInt((curShowTimeSeconds - curDay * 86400) / 3600);
var curMinutes = parseInt((curShowTimeSeconds - (curDay * 86400) - (curHours * 3600)) / 60);
var curSeconds = curShowTimeSeconds % 60;
console.log("curSeconds:" + curSeconds);
console.log("nextSeconds:" + nextSeconds);
if (nextSeconds !== curSeconds) {
//"时"产生变化时添加的小球
if (parseInt(curHours / 10) !== parseInt(nextHours / 10)) {
addLemon(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10));
}
if (parseInt(curHours % 10) !== parseInt(nextHours % 10)) {
addLemon(MARGIN_LEFT + 16 * (r + 1), MARGIN_TOP, parseInt(curHours % 10));
}
//"分"产生变化时添加的小球
if (parseInt(curMinutes / 10) !== parseInt(nextMinutes / 10)) {
addLemon(MARGIN_LEFT + 46 * (r + 1), MARGIN_TOP, parseInt(curMinutes / 10));
}
if (parseInt(curMinutes % 10) !==parseInt(nextMinutes % 10)) {
addLemon(MARGIN_LEFT + 62 * (r + 1), MARGIN_TOP, parseInt(curMinutes % 10));
}
//"秒"产生变化时生成的小球
if (parseInt(curSeconds / 10) !== parseInt(nextSeconds / 10)) {
addLemon(MARGIN_LEFT + 92 * (r + 1), MARGIN_TOP, parseInt(curSeconds / 10));
}
if (parseInt(curSeconds % 10) !== parseInt(nextSeconds % 10)) {
addLemon(MARGIN_LEFT + 108 * (r + 1), MARGIN_TOP, parseInt(curSeconds % 10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateLemon();
console.log(littleLemon.length + "hello");
}
// 添加变化的数字到littleLemon数组中
function addLemon(x, y, num) {
console.log("添加数组:");
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 aLemon = {
x: x + j * 2 * (r + 1) + (r + 1),
y: y + i * 2 * (r + 1) + (r + 1),
g: 1.5 + Math.random(),
vx: Math.pow(1, Math.ceil(Math.random() * 1000)) * 20,
vy: -3,
color: colors[Math.floor(Math.random() * colors.length)]
};
littleLemon.push(aLemon);
}
}
//将数字依次排列
function render(ctx) {
ctx.clearRect(0, 0, width, height);
curShowTimeSeconds = getCurrentShowTimeSeconds();
var day = parseInt(curShowTimeSeconds / 86400);
var hours = parseInt((curShowTimeSeconds - day * 86400) / 3600);
var minutes = parseInt((curShowTimeSeconds - (day * 86400) - (hours * 3600)) / 60);
var seconds = curShowTimeSeconds % 60;
renderDigit(DAY_MARGIN_LEFT, DAY_MARGIN_TOP, parseInt(day / 10), ctx);
renderDigit(DAY_MARGIN_LEFT + 15 * (R + 1), DAY_MARGIN_TOP, parseInt(day % 10), ctx);
renderDigit2(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), ctx);
renderDigit2(MARGIN_LEFT + 16 * (r + 1), MARGIN_TOP, parseInt(hours % 10), ctx);
renderDigit2(MARGIN_LEFT + 35 * (r + 1), MARGIN_TOP, 10, ctx);
renderDigit2(MARGIN_LEFT + 46 * (r + 1), MARGIN_TOP, parseInt(minutes / 10), ctx);
renderDigit2(MARGIN_LEFT + 62 * (r + 1), MARGIN_TOP, parseInt(minutes % 10), ctx);
renderDigit2(MARGIN_LEFT + 81 * (r + 1), MARGIN_TOP, 10, ctx);
renderDigit2(MARGIN_LEFT + 92 * (r + 1), MARGIN_TOP, parseInt(seconds / 10), ctx);
renderDigit2(MARGIN_LEFT + 108 * (r + 1), MARGIN_TOP, parseInt(seconds % 10), ctx);
for (var i = 0; i < littleLemon.length; i++) {
ctx.fillStyle = littleLemon[i].color;
ctx.beginPath();
// lemon(ctx, 3, -3, littleLemon[i].x, littleLemon[i].y, r, -(Math.random() * 360));
ctx.arc(littleLemon[i].x, littleLemon[i].y, r, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
}
//更新Lemon位置
function updateLemon() {
for (var i = 0; i < littleLemon.length; i++) {
littleLemon[i].x += littleLemon[i].vx;
littleLemon[i].y += littleLemon[i].vy;
littleLemon[i].vy += littleLemon[i].g;
if (littleLemon[i].y >= height - r) {
littleLemon[i].y = height - r;
littleLemon[i].vy = -littleLemon[i].vy * 0.75;
}
}
var cnt = 0;
for (var i = 0; i < littleLemon.length; i++)
if (littleLemon[i].x + r > 0 && littleLemon[i].x - r < width)
littleLemon[cnt++] = littleLemon[i];
while (littleLemon.length > Math.min(300, cnt)) {
littleLemon.pop();
}
}
//根据当前时间渲染数字(dd天数)
function renderDigit(x, y, num, ctx) {
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) {
ctx.beginPath();
// ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
// -(Math.random()*25);
lemon(ctx, 3, -3, x + j * 2 * (R + 1) + R, y + i * 2 * (R + 1) + (R + 1), R, 0);
// lemon(ctx,3,-3,400,400,100,-25);
ctx.closePath();
}
}
}
}
//根据当前时间渲染数字(hh,MM,ss)
function renderDigit2(x, y, num, ctx) {
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) {
ctx.beginPath();
// ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
// -(Math.random()*25);
lemon(ctx, 3, -3, x + j * 2 * (r + 1) + r, y + i * 2 * (r + 1) + (r + 1), r, 0);
// lemon(ctx,3,-3,400,400,100,-25);
ctx.closePath();
}
}
}
}
