编写一个简易计时器程序(edu)

最新推荐文章于 2024-07-29 19:45:53 发布

小黑GFR

最新推荐文章于 2024-07-29 19:45:53 发布

阅读量4.4k

点赞数

分类专栏： html学习文章标签： html

本文链接：https://blog.csdn.net/lovelygfr/article/details/109739814

版权

html学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

程序设计

编写一个简易计时器程序。要求：
（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>