问题是每次我想在 Chrome 中运行它时都会弹出错误消息。每次更改时,日期/小时和分钟都应变为红色。
// Set the date we're counting down to
var countDownDate = new Date("Nov 30, 2018 15:50:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Blink
if (seconds == 59){
document.getElementById("minutes").style.color = 'red';
if(minutes == 59){
document.getElementById("hours").style.color = 'red';
if(hour == 24){
document.getElementById("days").style.color = 'red';
}
}
}
else{
document.getElementById("minutes").style.color = 'black';
document.getElementById("hours").style.color = 'black';
document.getElementById("days").style.color = 'black';
}
// Delete Day, Hour and Minute Timer if they are 0
if (days !== 0 && hours !== 0 && minutes !== 0 && seconds !== 0){
document.getElementById("time").innerHTML = "Noch " + days + " Tage " + hours + " Stunden "
+ minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels";
if (days === 0){
document.getElementById("time").innerHTML = "Noch " + hours + " Stunden "
+ minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels";
if (hours === 0){
document.getElementById("time").innerHTML = "Noch " + minutes + " Minuten und " + seconds + " Sekunden bis zur Fertigstellung des Spiels";
if (minutes === 0){
document.getElementById("time").innerHTML = "Noch " + seconds + " Sekunden bis zur Fertigstellung des Spiels";
}
}
}
}
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("time").innerHTML = "Zu Ende";
}
// show hidden content if days / 3 = mod 0
if (days % 3 !== 0){
document.getElementById("special").style.visibility = 'hidden';
}
}, 1000);
最佳答案
我可以在这里看到两个问题。
首先是您尝试使用 getElementById
带有似乎还不存在的元素(“分钟”、“小时”、“天”)。具有这些 ID 的元素需要存在于 DOM 中才能使用 getElementById
访问它们。方法。
解决这个问题的一种方法是将当前变量包装在 <span>
中标记,并为每个标记分配一个唯一的 ID,您以后可以访问该 ID。
var daysElement = `<span id="days">${days}</span>`,
hoursElement = `<span id="hours">${hours}</span>`,
minutesElement = `<span id="minutes">${minutes}</span>`,
secondsElement = `<span id="seconds">${days}</span>`;
现在,如果您将这些元素添加到 innerHTML
“时间”元素(而不仅仅是数字本身),您将能够定位他们的 ID 并随后更改他们的样式。
document.getElementById("time").innerHTML = "Noch "
+ hoursElement + " Stunden " + minutesElement + " Minuten und "
+ secondsElement + " Sekunden bis zur Fertigstellung des Spiels";
最后,您需要确保您的操作顺序是正确的。将以下代码移动到您更改 innerHTML
的部分下方 “时间”,以便元素在您尝试更改其样式属性之前存在于 DOM 中。
if (seconds == 59){
document.getElementById("minutes").style.color = 'red';
if(minutes == 59){
document.getElementById("hours").style.color = 'red';
if(hour == 24){
document.getElementById("days").style.color = 'red';
}
}
}
else{
document.getElementById("minutes").style.color = 'black';
document.getElementById("hours").style.color = 'black';
document.getElementById("days").style.color = 'black';
}
关于javascript - JS 类型错误 : Cannot read property 'style' of null - Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53457960/