javascript - 为什么倒计时数字经过一定时间后颜色没有变化?

标签 javascript html css

我做了一个简单的倒计时用于运动。我认为自己创建一个很有趣,但我被困在一个我没有足够知识的部分......

倒计时完全按照我的意愿进行,但更改颜色+添加 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/

相关文章:

CSS 下拉菜单不会与父菜单对齐

javascript - 如何从字符串调用和执行运算符?

javascript - jquery inArray 找不到值

javascript - 如何让 hls.js 在请求加密 key 时在请求 header 中发送 cookie

javascript - javascript : URLs (pseudo-protocol) introduced into the HTML standard? 是什么时候

jquery - 像 Firebug 一样检查 html 元素

jQuery toggle show XHTML Smarty some clahes 也许吗?它不显示

javascript - Angularjs中带有按钮的可扩展div

html - webkitNotifications - SECURITY_ERR : DOM Exception 18 - script, OK - 按钮

html - "gallery"布局中的 float 元素以随机浏览器宽度中断到下一行