• 用javascript制作秒表(有一个小问题,复位的时候,毫秒从01开始)


     主体:
     <div id="div1">00:00:00</div>
        <div id="div2">
            <button id="start">开始</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="stop">停止</button><br>
        </div>
        <div id="div3">
            <button id="continue">继续</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="restoration">复位</button><br>
        </div>
     
    样式:
       #div1 {
                height: 100px;
                 300px;
                border: black solid 3px;
                line-height: 100px;
                text-align: center;
                font-size: 50px;
                margin: 100px auto 20px;
            }

            #div2,
            #div3 {
                margin: 0 auto;
                height: 100px;
                 250px;
            }

            #div3 {
                display: none;
            }

            button {
                height: 50px;
                 100px;
                font-size: 30px;
            }
     
     
    JS:
     
       var oDiv = document.getElementById('div1');
            var oStart = document.getElementById('start');
            var oStop = document.getElementById('stop');
            var oContinue = document.getElementById('continue');
            var oRestoration = document.getElementById('restoration');
            var oDiv2 = document.getElementById('div2');
            var oDiv3 = document.getElementById('div3');
            var m = 0;
            var s = 0;
            var ms = 0;
            var mm = 0;
            var ss = 0;
            var mss = 0;

           

            //触发装置,开始
            oStart.onclick = function () {
                t = setInterval(function () {
                    oDiv.innerHTML = secondChronographStr();
                }, 10);
                oStart.disabled = true;
            }
            //触发装置,停止
            oStop.onclick = function () {
                clearInterval(t);
                oStart.disabled = false;
                oDiv2.style.display = 'none';
                oDiv3.style.display = 'block';
            }
            //触发装置,继续
            oContinue.onclick = function () {
                t = setInterval(function () {
                    oDiv.innerHTML = secondChronographStr();
                }, 10);
                oDiv2.style.display = 'block';
                oDiv3.style.display = 'none';
                oStart.disabled = true;
            }
            //触发装置,复位
            oRestoration.onclick = function () {
                m = 0;
                s = 0;
                ms = 0;
                mm = 0;
                ss = 0;
                mss = 0;
     
                oDiv.innerHTML = secondChronographStr();
                oDiv2.style.display = 'block';
                oDiv3.style.display = 'none';
            }


            //定义函数
            //获取时间分钟秒毫秒
            function secondChronographStr() {
                ms++;
     
                //分钟
                if (m == 60) {
                    ms = 0;
                    s = 0;
                    m = 0;
                }
                if (m < 10) {
                    mm = '0' + m;
                } else {
                    mm = m;
                }

                //秒
                if (s == 60) {
                    m++;
                    s = 0;
                }
                if (s < 10) {
                    ss = '0' + s;
                } else {
                    ss = s;
                }

                //毫秒
                if (ms == 100) {
                    s++;
                    ms = 0;
                }
                if (ms < 10) {
                    mss = '0' + ms;
                } else {
                    mss = ms;
                }

                return mm + ':' + ss + ':' + mss;
            }
  • 相关阅读:
    现实世界的Windows Azure:采访圣地亚哥公共安全小组的技术经理Adrian Gonzalez
    Casablanca发布:一个用C++访问云的本地类库
    现实世界的Windows Azure:采访IDV解决方案的副总经理Scott Caulk
    Rock Paper Azure Challenge春季比赛来了!
    上海职场六大关键词完全搜集之:才市
    理解 Delphi 的类(十一) 深入类中的方法[8] 抽象方法与抽象类
    理解 Delphi 的类(十一) 深入类中的方法[10] 构造方法与析构方法
    TScreen 类 获取字体列表
    理解 Delphi 的类(十一) 深入类中的方法[9] 不能被覆盖的方法与不能被继承的类
    理解 Delphi 的类(十一) 深入类中的方法[13] 方法的调用约定
  • 原文地址:https://www.cnblogs.com/dandanyajin/p/11928751.html
Copyright © 2020-2023  润新知