web-简易计时器

最新推荐文章于 2024-05-11 19:06:41 发布

夏目贵志_

最新推荐文章于 2024-05-11 19:06:41 发布

阅读量1.9k

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/m0_58813405/article/details/122280311

版权

编写一个简易计时器程序。要求：

（1）页面包含一个“开始”按钮，一个“停止”按钮，一个“清零”按钮以及一个用于显示时间的文本框。

（2）当点击“开始”按钮时,从 0 开始按秒计时，文本框显示实时的计时时间（以秒为单位）。

（3）当点击“停止”按钮时，将停止计时，文本框显示的时间不再增加。

（4）当点击“清零”按钮时，文本框显示的时间为0秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        var second = 0;
        var timer = null;
        
        function startTime(){
            var timing = document.getElementById("timing");
            var display = document.getElementById("display");
            timer = setInterval(function(){
                display.value = second + "秒";
                second++
            },1000);
        }


        function endTime(){
            clearInterval(timer);
        }

        function clearTheTime(){
            var display = document.getElementById("display");
            display.value = 0 + "秒"
        }
    </script>

</head>
<body>
    <input id="display">
    <input type="button" id="timing" value="开始" onclick="startTime()">
    <input type="button" value="停止" onclick="endTime()">
    <input type="button" value="清零" onclick="clearTheTime()">
</body>
</html>