利用JS编写一个定时秒表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        //定义按钮,以及表现格式
        <span id="h"></span>: <span id="m"></span>: <span id="s"></span>: <span id="ss"></span><br />
        <input type="button" onclick="startclock()"  value="开始计时"/>
        <input type="button" onclick="stopclock()"  value="暂停计时"/>
        <input type="button" onclick="endclock()"  value="重置计时"/>
                
        <script language="JavaScript">
            var h;//定义时
            var m;//定义分
            var s;//定义秒
            var ss;//定义毫秒
            var sec;//定义时间变量
            
            function start(){
                h=parseInt(document.getElementById("h").innerHTML);//将得到的时间格式化为整数类型
                m=parseInt(document.getElementById("m").innerHTML);    
                s=parseInt(document.getElementById("s").innerHTML);
                ss=parseInt(document.getElementById("ss").innerHTML);
                
                ss+=1;
                if(ss<10){//判断时间增长循环函数
                    s+=1;
                    ss=0;
                    if(s>60){
                        m+=1;
                        s=0;
                        if(m>60){
                            h+1;
                            m=;
                        }
                    }
                }
                document.getElementById("h").innerHTML=h;//获得增长小时的数值
                document.getElementById("m").innerHTML=(m>60)?'0'+m:m;//判断分钟是否大于60,如果大于60,则将m归为0
                document.getElementById("s").innerHTML=(s>60)?'0'+s:s;
                document.getElementById("ss").innerHTML=ss;                            
            }
            
            
            function startclock(){//定义开始计时函数
                sec=setInterval("start()",100);
            }
            function stopclock(){//定义暂停计时函数
                clearInterval(sec);
            }
            function endclock(){​​​​​​​//定义结束计时函数
                clearInterval(sec);
                document.getElementById("h").innerHTML=0;
                document.getElementById("m").innerHTML=0;
                document.getElementById("s").innerHTML=0;
                document.getElementById("ss").innerHTML=0;            
            }
            
        </script>
        
    
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_40509841/article/details/82226787