记时器带暂停-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>

 

posted @ 2014-12-29 23:07  小菜希  阅读(231)  评论(0)    收藏  举报