html——js简单计时器实现

最新推荐文章于 2024-08-19 18:00:05 发布

知北行

最新推荐文章于 2024-08-19 18:00:05 发布

阅读量8k

点赞数 2

分类专栏： Html+Js 文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_35077107/article/details/105496295

版权

Html+Js 专栏收录该内容

58 篇文章 6 订阅

订阅专栏

实现原理：
利用js的setInterval()与clearInterval()函数实现。

实现效果：
在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>timerDemo</title>

    <script>
        var second;//时 分 秒
        second=0;//初始化

        var clock;//计时器
        function resetTimer()//重置
        {
            clearInterval(clock);
            second=0;
            document.getElementById('timeValue').value=second+'秒';
        }

        function startTimer()//开始
        {
            clock=setInterval(timer,1000);
        }

        function stopTimer() {
            //停止计时
            clearInterval(clock);
            document.getElementById('timeValue').value=second+'秒';
        }
        //计时函数
        function timer(){
            second++;
            document.getElementById('timeValue').value=second+'秒';
        }

    </script>
</head>
<body>


<div style="text-align: center">
    <input type="text" id="timeValue" value="0秒" readonly><br>
    <button type="button" onclick="startTimer()">开始</button> <button type="button" onclick="stopTimer()">暂停</button> <button type="button" onclick="resetTimer()">重置</button>
</div>
</body>
</html>