首页 🍋Code

<!--Created by real_pbyyy on 2017/3/18.--><!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>TimeCount</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #pause{
            display: none;
        }
        .count{
            width:300px;
            height:150px;
            background: transparent;
            padding:20px;
            margin:0 auto;
            margin-top:60px;
            text-align: center;
            border-radius: 10%;
            opacity: 0.;
        }
        p{
            margin:30px;
        }
        #tCount {
            text-align: center;
            font-size: 30px;
            color:red;
        }
    </style>
</head>
<body>
<div class="count">
    <p id="tCount"></p>
    <p id="tCount2"></p>
    <input type="button" value="开始计时" id="start" class="btn btn-success"/>
    <input type="button" value="暂停计时" id="pause"  class="btn btn-info" />
    <input type="button" value="复位" id="reset"  class="btn btn-danger"/>
</div>
<script>
    //tCount2是准备实现倒计时功能的,现在还没做
    var tCount = document.getElementById("tCount"),
        tCount2 = document.getElementById("tCount2"),
        sBtn =document.getElementById("start"),
        rBtn = document.getElementById("reset"),
        pBtn = document.getElementById("pause"),
        txt = document.createTextNode("00:00:00"),
        t=1,
        s;
    tCount.appendChild(txt);

    //按钮事件
    function control() {
        sBtn.onclick=function () {
            sBtn.style.display = "none";
            pBtn.style.display = "inline";
            count();
        };

        rBtn.onclick=function(){
            reset();
            sBtn.style.display="inline";
            pBtn.style.display="none";
        }

        pBtn.onclick=function () {
            sBtn.style.display="inline";
            pBtn.style.display="none";
            pause();
        }

    }

    //计算时间
    function timeAdd() {
        if(t<10){
            txt.nodeValue = "00:00:0"+t;
        }else if(t>=10&&t<60){
            txt.nodeValue = "00:00:"+t;
        }else if(t<3600&&t>60){
            var m = Math.floor(t/60);
            var t1 = t%60;
            if(m<10){
                if(t1<10){
                    txt.nodeValue = "00:0"+m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    txt.nodeValue = "00:0"+m+":"+t1;
                }
            }else if(m<60&&m>=10){
                if(t1<10){
                    txt.nodeValue = "00:"+m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    txt.nodeValue = "00:"+m+":"+t1;
                }
            }
        }else if(t>=3600){
            var h = Math.floor(t/3600);
            var m = Math.floor((t-3600*h)/60);
            var t1 = t%60;
            var mt;
            if(m<10){
                if(t1<10){
                    mt = "0"+m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    mt = "0"+m+":"+t1;
                }
            }else if(m<60&&m>=10){
                if(t1<10){
                    mt = m+":0"+t1;
                }else if(t1>=10&&t1<60){
                    mt = m+":"+t1;
                }
            }
            txt.nodeValue = h+":"+ mt;
        }
        t++;
    }

    //刷新时间显示
    function count(){
        s = setInterval("timeAdd()",1000);
    }

    //复位键的功能实现
    function reset() {
        clearInterval(s);
        txt.nodeValue = "00:00:00";
        t = 1;
        s = null;
    }

    //暂停键的功能实现
    function pause() {
        var now = txt.nodeValue;
        clearInterval(s);
    }

    window.onload=function () {
        control();
    }
</script>
</body>
</html>



文章评论