JavaScript 计时器

在本文中，展示了一个计时器，显示倒计时，并且其颜色/消息会在特定时间间隔后改变。

语法：

setTimeout(function, milliseconds, parameter1, ...)

参数： 它接受一些参数，具体如下-

function： 这是将要执行的函数。
milliseconds： 在执行代码之前等待的毫秒数。它是可选的，默认值为零（0）。
parameter1： 这是传递给函数的附加参数，它是可选的。

返回值： 它返回一个表示设置的计时器的ID值的数字。设置计时器为2分钟的JavaScript代码，当时间到时，页面弹出“时间到”。setTimeout() 方法在指定的毫秒数之后调用一个函数或计算一个表达式。

先决条件： GetMinutes()、GetSeconds() 和 SetInterval() 方法

实现计时器的JavaScript代码：

示例： 在这个示例中，我们将启动一个计时器，并在计时器停止时显示一条消息。

<script>
    var mins=.1;
    var secs=mins*60;
    function countdown() {
        setTimeout('Decrement()',60);
    }
    function Decrement() {
        if(document.getElementById) {
            minutes=document.getElementById("minutes");
            seconds=document.getElementById("seconds");
            if(seconds<59) {
                seconds.value=secs;
            }
            else {
                minutes.value=getminutes();
                seconds.value=getseconds();
            }
            if(mins<1) {
                minutes.style.color="red";
                seconds.style.color="red";
            }
            if(mins<0) {
                alert('time up');
                minutes.value=0;
                seconds.value=0;
            }
            else {
                secs--;
                setTimeout('Decrement()',1000);
            }
        }
    }
 
    function getminutes() {
        mins=Math.floor(secs/60);
        return mins;
    }
 
    function getseconds() {
        return secs-Math.round(mins*60);
    }
</script>
<body onload="countdown();">
    <div style="display: flex; width:80%;
                justify-content:center; padding-top: 0%;">
        Time Left ::
    </div>
    <div style="display: flex; width:80%; 
                justify-content:center; padding-top: 0%;">
        <input id="minutes" type="text" style="width: 2%; border: none; font-size: 16px;
                      font-weight: bold; color: black;">
        <font size="5">
            :
        </font>
        <input id="seconds" type="text" style="width: 2%; border: none; font-size: 16px;
                      font-weight: bold; color: black;">
    </div>
</body>

输出：

JavaScript 计时器