編寫一個簡易計時器程式(edu)

小黑GFR發表於2020-11-17

程式設計

編寫一個簡易計時器程式。要求：
（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>

實現效果 ：
在這裡插入圖片描述

相關文章