我做了一个简单的倒计时用于运动。我认为自己创建一个很有趣,但我被困在一个我没有足够知识的部分......
倒计时完全按照我的意愿进行,但更改颜色+添加 css 动画似乎是不可能的。 这是关于最后一部分“changeColor”
如果您输入 60 秒,它将变为绿色。 假设我们输入 29s,它会变成橙色。 如果你输入 9s 它会变成红色。
但是当秒数从 30 变为 29 时,为什么它不会自动更改?然后它应该变成橙色。 同样适用于 10 > 9 秒,它应该开始闪烁 + 变红,但没有任何反应。
查看下面的脚本:
var CCOUNT;
$(document).ready(function () {
$('#btnct').click(function () {
CCOUNT = $('#seconds').val();
cdreset();
});
});
var t, count;
function cddisplay() {
document.getElementById('timespan').innerHTML = count;
}
function countdown() {
// starts countdown
cddisplay();
changeColor(CCOUNT);
if (count === 0) {
// time is up
} else {
count--;
t = setTimeout(countdown, 1000);
}
}
function cdpause() {
// pauses countdown
clearTimeout(t);
}
function cdreset() {
// resets countdown
cdpause();
count = CCOUNT;
cddisplay();
}
function changeColor() {
if (CCOUNT <= 1000 && CCOUNT > 30) {
document.getElementById('counting1').style.color = "#00CC00";
}
else if (CCOUNT <= 30 && CCOUNT > 10) {
document.getElementById('timespan').style.color = "#F87217";
}
else {
document.getElementById('timespan').style.color = "#ff0000";
document.getElementById('timespan').css = ({"text-decoration": "blink", "-webkit-animation-name": "0.2s", "text-decoration": "blink", "-webkit-animation-iteration-count": "infinite", "-webkit-animation-timing-function": "ease-in-out", "-webkit-animation-direction": "alternate"});
}
}
我已将其上传到 baswijdenes.com/simple-countdown 以实时观看。
编辑:我添加了 html
<center>
<form id="frm">
<div class="counting">
<input type="text" class="input" id="seconds" name="seconds" value="0" size="2" maxlength="4" />
</div>
<input type="button" class="btn blue" id="btnct" value="Input" />
</form>
<div class="counting1" id="counting1">
<span type="text" id="timespan">0</span>
</div>
<BR>
<BR>
<div id="divaroundbuttons">
<input type="button" class="btn green" value="Start" onclick="countdown()">
<input type="button" class="btn orange" value="Stop" onclick="cdpause()">
<input type="button" class="btn red" value="Reset" onclick="cdreset()">
</div>
</center>
最佳答案
我试着调试了一下,发现有两个变量让我很困惑:
- 帐号
- 计数
当尝试更改函数 countdown() 并添加 console.log(CCOUNT) 然后我开始倒计时时,我发现这个变量没有倒计时。它是固定的。所以我把 CCOUNT 改成 count 但在这里我发现显示的数字改变了颜色但是它是一个固定数字。
所以我认为作为最终解决方案,您应该对两个变量 CCOUNT 进行倒计时,然后像这样计数:
function countdown() {
// starts countdown
cddisplay();
changeColor(CCOUNT);
if (CCOUNT=== 0) {
// time is up
} else {
CCOUNT--;
count--;
t = setTimeout(countdown, 1000);
}
}
changeColor() 有另一个问题。你说颜色应该从 29 和 9 秒开始改变,而不是 30 和 10 秒
希望对你有帮助
关于javascript - 为什么倒计时数字经过一定时间后颜色没有变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44871674/