zoukankan      html  css  js  c++  java
  • 记时器带暂停-html

    <!DOCTYPE html>
    <html>
    <head>
    <title>作业</title>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
    input {
        width: 300px;
        text-align: center;
    }
    </style>
    
    <script type="text/javascript">
        var hour = 0;
        var minute = 0;
        var second = 0;
        var interval;
        var flag = true;
        window.onload = function() {
    
            //当按钮点击时
            document.getElementById("btn").onclick = function() {
                this.disabled = "disabled";
                //time();
    
                interval = window.setInterval("time()", 1000);
            };
    
            //对暂停继续按钮进行注册事件
            document.getElementById("btn1").onclick = function() {
    
                if (flag) {
                    window.clearInterval(interval);
                } else {
                    interval = window.setInterval("time()", 1000);
                }
                flag=!flag;
            };
    
        }
    
        var time = function() {
            second++;
    
            if (second >= 60) {
                minute++;
                second = 0;
            }
            if (minute >= 60) {
                minute = 0;
                hour++;
            }
    
            hour = parseInt(hour) > 9 ? hour : "0" + parseInt(hour);
            minute = parseInt(minute) > 9 ? minute : "0" + parseInt(minute);
            second = parseInt(second) > 9 ? second : "0" + parseInt(second);
    
            document.getElementById("txt").value = hour + ":" + minute + ":"
                    + second;
    
            //让上面的代码,每间隔一秒钟执行一次.
    
            //setTimeout("time()", 1000);
        }
    </script>
    
    </head>
    
    <body>
        <input type="text" id="txt" readonly="readonly">
        <br>
        <input type="button" value="开始" id="btn">
        <br>
        <input type="button" value="暂停/继续" id="btn1">
    
    </body>
    </html>
  • 相关阅读:
    window.open
    GetPostBackClientHyperlink
    引发和使用事件
    浅谈宝宝的教育及培养
    C#关键字之:base、this
    Ioc
    自定义input[type="radio"]的样式
    选择_冒泡_直接插入排序.md
    Tkinter.md
    从零开始学wordpress 之一
  • 原文地址:https://www.cnblogs.com/spadd/p/4192603.html
Copyright © 2011-2022 走看看