1. PingCode智库首页
  2. 百科

js怎么写一个计时器

Edit2 • • 百科

js怎么写一个计时器

JS 计时器的实现方法包括使用 setInterval、setTimeout、Date 对象、以及结合 DOM 操作来实现。最常用的方法是使用 setInterval 和 setTimeout。其中，setInterval 是一个周期性调用函数的方法，而 setTimeout 则是一次性调用。以下是详细解释和示例代码。

一、SETINTERVAL 方法

使用 setInterval 方法可以在固定的时间间隔内重复执行一个函数。它非常适合用于实现计时器。

1.1、基本用法

function startTimer(duration, display) {


    var timer = duration, minutes, seconds;


    setInterval(function () {


        minutes = parseInt(timer / 60, 10);


        seconds = parseInt(timer % 60, 10);


        minutes = minutes < 10 ? "0" + minutes : minutes;


        seconds = seconds < 10 ? "0" + seconds : seconds;


        display.textContent = minutes + ":" + seconds;


        if (--timer < 0) {


            timer = duration;


        }


    }, 1000);


}


window.onload = function () {


    var duration = 60 * 5; // 5 minutes


    var display = document.querySelector('#time');


    startTimer(duration, display);


};

这段代码在页面加载时启动一个 5 分钟的计时器，并每秒更新一次显示。

1.2、暂停和重置

为了增强功能，可以添加暂停和重置功能。

var interval;


function startTimer(duration, display) {


    var timer = duration, minutes, seconds;


    interval = setInterval(function () {


        minutes = parseInt(timer / 60, 10);


        seconds = parseInt(timer % 60, 10);


        minutes = minutes < 10 ? "0" + minutes : minutes;


        seconds = seconds < 10 ? "0" + seconds : seconds;


        display.textContent = minutes + ":" + seconds;


        if (--timer < 0) {


            clearInterval(interval);


        }


    }, 1000);


}


function pauseTimer() {


    clearInterval(interval);


}


function resetTimer(duration, display) {


    clearInterval(interval);


    startTimer(duration, display);


}


window.onload = function () {


    var duration = 60 * 5; // 5 minutes


    var display = document.querySelector('#time');


    document.querySelector('#start').addEventListener('click', function() {


        startTimer(duration, display);


    });


    document.querySelector('#pause').addEventListener('click', pauseTimer);


    document.querySelector('#reset').addEventListener('click', function() {


        resetTimer(duration, display);


    });


};

二、SETTIMEOUT 方法

setTimeout 方法用于在指定的时间后执行一次函数。虽然不适合实现持续计时功能，但可以与递归结合来实现。

2.1、基本用法

function startTimer(duration, display) {


    var timer = duration, minutes, seconds;


    function updateTimer() {


        minutes = parseInt(timer / 60, 10);


        seconds = parseInt(timer % 60, 10);


        minutes = minutes < 10 ? "0" + minutes : minutes;


        seconds = seconds < 10 ? "0" + seconds : seconds;


        display.textContent = minutes + ":" + seconds;


        if (--timer >= 0) {


            setTimeout(updateTimer, 1000);


        }


    }


    updateTimer();


}


window.onload = function () {


    var duration = 60 * 5; // 5 minutes


    var display = document.querySelector('#time');


    startTimer(duration, display);


};

2.2、暂停和重置

var timeout;


function startTimer(duration, display) {


    var timer = duration, minutes, seconds;


    function updateTimer() {


        minutes = parseInt(timer / 60, 10);


        seconds = parseInt(timer % 60, 10);


        minutes = minutes < 10 ? "0" + minutes : minutes;


        seconds = seconds < 10 ? "0" + seconds : seconds;


        display.textContent = minutes + ":" + seconds;


        if (--timer >= 0) {


            timeout = setTimeout(updateTimer, 1000);


        }


    }


    updateTimer();


}


function pauseTimer() {


    clearTimeout(timeout);


}


function resetTimer(duration, display) {


    clearTimeout(timeout);


    startTimer(duration, display);


}


window.onload = function () {


    var duration = 60 * 5; // 5 minutes


    var display = document.querySelector('#time');


    document.querySelector('#start').addEventListener('click', function() {


        startTimer(duration, display);


    });


    document.querySelector('#pause').addEventListener('click', pauseTimer);


    document.querySelector('#reset').addEventListener('click', function() {


        resetTimer(duration, display);


    });


};

三、结合 DATE 对象

使用 Date 对象可以实现更复杂的计时器功能，例如计算经过的实际时间，以应对浏览器暂停或页面切换等情况。

3.1、基本用法

function startTimer(display) {


    var startTime = Date.now();


    function updateTimer() {


        var elapsedTime = Date.now() - startTime;


        var totalSeconds = Math.floor(elapsedTime / 1000);


        var minutes = Math.floor(totalSeconds / 60);


        var seconds = totalSeconds % 60;


        minutes = minutes < 10 ? "0" + minutes : minutes;


        seconds = seconds < 10 ? "0" + seconds : seconds;


        display.textContent = minutes + ":" + seconds;


        requestAnimationFrame(updateTimer);


    }


    updateTimer();


}


window.onload = function () {


    var display = document.querySelector('#time');


    startTimer(display);


};

3.2、暂停和重置

var startTime;


var elapsedTime = 0;


var isRunning = false;


function startTimer(display) {


    if (!isRunning) {


        startTime = Date.now() - elapsedTime;


        isRunning = true;


        function updateTimer() {


            if (isRunning) {


                elapsedTime = Date.now() - startTime;


                var totalSeconds = Math.floor(elapsedTime / 1000);


                var minutes = Math.floor(totalSeconds / 60);


                var seconds = totalSeconds % 60;


                minutes = minutes < 10 ? "0" + minutes : minutes;


                seconds = seconds < 10 ? "0" + seconds : seconds;


                display.textContent = minutes + ":" + seconds;


                requestAnimationFrame(updateTimer);


            }


        }


        updateTimer();


    }


}


function pauseTimer() {


    isRunning = false;


}


function resetTimer(display) {


    isRunning = false;


    elapsedTime = 0;


    display.textContent = "00:00";


}


window.onload = function () {


    var display = document.querySelector('#time');


    document.querySelector('#start').addEventListener('click', function() {


        startTimer(display);


    });


    document.querySelector('#pause').addEventListener('click', pauseTimer);


    document.querySelector('#reset').addEventListener('click', function() {


        resetTimer(display);


    });


};

四、结合 DOM 操作

结合 DOM 操作，可以将计时器功能集成到网页中，提供更丰富的用户交互体验。

4.1、基本用法

<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Timer</title>


</head>


<body>


<div id="time">00:00</div>


<button id="start">Start</button>


<button id="pause">Pause</button>


<button id="reset">Reset</button>


<script>


var startTime;


var elapsedTime = 0;


var isRunning = false;


function startTimer(display) {


    if (!isRunning) {


        startTime = Date.now() - elapsedTime;


        isRunning = true;


        function updateTimer() {


            if (isRunning) {


                elapsedTime = Date.now() - startTime;


                var totalSeconds = Math.floor(elapsedTime / 1000);


                var minutes = Math.floor(totalSeconds / 60);


                var seconds = totalSeconds % 60;


                minutes = minutes < 10 ? "0" + minutes : minutes;


                seconds = seconds < 10 ? "0" + seconds : seconds;


                display.textContent = minutes + ":" + seconds;


                requestAnimationFrame(updateTimer);


            }


        }


        updateTimer();


    }


}


function pauseTimer() {


    isRunning = false;


}


function resetTimer(display) {


    isRunning = false;


    elapsedTime = 0;


    display.textContent = "00:00";


}


window.onload = function () {


    var display = document.querySelector('#time');


    document.querySelector('#start').addEventListener('click', function() {


        startTimer(display);


    });


    document.querySelector('#pause').addEventListener('click', pauseTimer);


    document.querySelector('#reset').addEventListener('click', function() {


        resetTimer(display);


    });


};


</script>


</body>


</html>

4.2、与 CSS 结合

可以添加一些简单的 CSS 来美化计时器的显示。

<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Timer</title>


<style>


#time {


    font-size: 2em;


    font-weight: bold;


    margin-bottom: 20px;


}


button {


    margin: 5px;


    padding: 10px 20px;


    font-size: 1em;


}


</style>


</head>


<body>


<div id="time">00:00</div>


<button id="start">Start</button>


<button id="pause">Pause</button>


<button id="reset">Reset</button>


<script>


var startTime;


var elapsedTime = 0;


var isRunning = false;


function startTimer(display) {


    if (!isRunning) {


        startTime = Date.now() - elapsedTime;


        isRunning = true;


        function updateTimer() {


            if (isRunning) {


                elapsedTime = Date.now() - startTime;


                var totalSeconds = Math.floor(elapsedTime / 1000);


                var minutes = Math.floor(totalSeconds / 60);


                var seconds = totalSeconds % 60;


                minutes = minutes < 10 ? "0" + minutes : minutes;


                seconds = seconds < 10 ? "0" + seconds : seconds;


                display.textContent = minutes + ":" + seconds;


                requestAnimationFrame(updateTimer);


            }


        }


        updateTimer();


    }


}


function pauseTimer() {


    isRunning = false;


}


function resetTimer(display) {


    isRunning = false;


    elapsedTime = 0;


    display.textContent = "00:00";


}


window.onload = function () {


    var display = document.querySelector('#time');


    document.querySelector('#start').addEventListener('click', function() {


        startTimer(display);


    });


    document.querySelector('#pause').addEventListener('click', pauseTimer);


    document.querySelector('#reset').addEventListener('click', function() {


        resetTimer(display);


    });


};


</script>


</body>


</html>

通过以上方法，您可以根据需求选择不同的方法实现 JavaScript 计时器，并结合 DOM 和 CSS 提供丰富的用户交互体验。

相关问答FAQs：

1. 如何使用JavaScript编写一个简单的计时器？

JavaScript提供了一个内置的计时器函数setTimeout()，可以用来实现计时器功能。可以使用以下步骤来编写一个计时器：

  • 创建一个变量来存储计时器的当前值。
  • 使用setInterval()函数来设置一个定时器，指定计时器每隔一秒执行一次。
  • 在每次定时器触发时，更新计时器的当前值并在页面上显示出来。

2. 我可以使用JavaScript创建一个倒计时器吗？

是的，你可以使用JavaScript来创建一个倒计时器。你可以使用setInterval()函数来实现每秒更新计时器的功能，并根据设定的结束时间来计算剩余的时间。

3. 如何在JavaScript中实现一个计时器，当时间到达指定值时触发某个事件？

你可以使用setInterval()函数来实现一个计时器，并在每次定时器触发时检查当前时间是否达到了指定值。当时间到达指定值时，你可以触发相应的事件或执行某些特定的操作。可以使用以下步骤来实现：

  • 创建一个变量来存储计时器的当前值。
  • 使用setInterval()函数设置一个定时器，指定计时器每隔一秒执行一次。
  • 在每次定时器触发时，更新计时器的当前值并检查是否达到了指定值。
  • 如果时间达到了指定值，则触发相应的事件或执行特定的操作。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3744495

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部