手机秒表(JS实现)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            html,
            body {
                height: 100%;
                width: 100%;
                background-color: black;
            }
            
            #time {
                color: white;
                font-size: 80px;
                padding-top: 35%;
                padding-left: 4%;
                height: 15%;
                width: 100%;
            }
            
            #butWrap {
                height: 10%;
                overflow: hidden;
                padding: 20px;
            }
            
            #butWrap input {
                border-radius: 40px;
                font-size: 20px;
                width: 80px;
                height: 80px;
                border: 0;
                outline: none;
            }
            
            #leftBtn {
                background-color: rgb(21, 21, 21);
                float: left;
                color: rgb(132, 132, 132);
            }
            
            #rightBtn {
                background-color: rgb(12, 56, 30);
                float: right;
                color: rgb(0, 196, 92);
            }
            
            #timeMain {
                height: 50%;
                width: 100%;
                overflow-y: scroll;
            }
            
            #timeMain div {
                color: white;
                font-size: 20px;
                border-top: 1px solid darkgray;
                border-bottom: 1px solid darkgray;
                padding: 10px;
                overflow: hidden;
            }
            
            #timeMain div>span:first-child {
                float: left;
            }
            
            #timeMain div>span:last-child {
                float: right;
            }
            
            .stop {
                background-color: rgb(66, 18, 15) !important;
                color: rgb(196, 0, 3) !important;
            }
        </style>
    </head>

    <body>
        <div id="time">00:00.00</div>
        <div id="butWrap">
            <input type="button" value="计次" id="leftBtn" />
            <input type="button" value="启动" id="rightBtn" />
        </div>
        <div id="timeMain"></div>

        <script>
            var timeDiv = document.getElementById("time"); // 最大数字显示标签
            var rightBtn = document.getElementById("rightBtn");
            var leftBtn = document.getElementById("leftBtn");
            var timeMain = document.getElementById("timeMain"); // 计次的部分
            var nowTime = 0; // 当前毫秒数
            var nowSeconds = 0; // 当前秒数
            var nowMinutes = 0; // 当前分钟数
            var t; // 保存计时器
            leftBtn.onclick = function(){
                if(this.value == "记次"){
                timeNum();
                } else {
                    resetTime();//复位
                }
                
            }

            rightBtn.onclick = function() {
                if(this.value == "启动") {
                    start();
                    this.className = "stop";
                    this.value = "停止";
                    leftBtn.value = "记次"
                } else {
                    stop();
                    this.className = "";
                    this.value = "启动";
                    leftBtn.value = "复位"
                }
            }

            // 1. 启动事件
            function start() {
                // (1) 数字变化
                t = setInterval(function() {
                    nowTime++;
                    changeTime();
                }, 10);
                if(timeMain.innerHTML == "") { //点击启动的时候只会走一次

                    timeNum();
                }

            }

            // 2. 停止事件
            function stop() {
                clearInterval(t);
            }

            function changeTime() {
                if(nowTime == 100) {
                    nowTime = 0;
                    nowSeconds++;
                }
                if(nowSeconds == 60) {
                    nowSeconds = 0;
                    nowMinutes++;
                }

                // 3. 处理时间格式
                checkTimeStyle();
            }

            function checkTimeStyle() {
                var resultStr = "";
                if(nowMinutes < 10) {
                    resultStr = "0" + nowMinutes + ":";
                } else {
                    resultStr = nowMinutes + ":";
                }

                if(nowSeconds < 10) {
                    resultStr += "0" + nowSeconds + ".";
                } else {
                    resultStr += nowSeconds + ".";
                }

                if(nowTime < 10) {
                    resultStr += "0" + nowTime;
                } else {
                    resultStr += nowTime;
                }

                timeDiv.innerHTML = resultStr;
            }

            // 4. 显示底部计次
            function timeNum() {
                var myD = document.createElement("div");
                var lSpan = document.createElement("span");
                var rSpan = document.createElement("span");
                myD.appendChild(lSpan);
                myD.appendChild(rSpan);
                timeMain.appendChild(myD);
                lSpan.innerHTML = "记次";
                rSpan.innerHTML = timeDiv.innerHTML;
            }
            function resetTime(){
                timeDiv.innerHTML = "00:00.00";
                nowTime = 0;
                nowSeconds = 0;
                nowMinutes = 0;
                timeMain.innerHTML = "";//干掉记次div里所有标签
            }
        </script>
    </body>

</html>