时分秒计时器 js

时分秒计时器 js

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>时分秒计时器</title>
        <script>
          // 初始值
          var flag=true;
          var h=m=s=0;
          var Init;
          function timers(){
            s=s+1;
            if(s>=60){
              s=00;
              m=m+1
            }
            if(m>=60){
              m=00;
              h=h+1;
            }
        //两种表现形式
        document.getElementById('timetext').value= `${h<10?('0'+h):h}时${m<10?('0'+m):m}分${s<10?('0'+s):s}秒`;
        document.getElementById('_h').innerHTML=`${h<10?('0' + h):h}时`
        document.getElementById('_m').innerHTML=`${m<10?('0' + m):m}分`
        document.getElementById('_s').innerHTML=`${s<10?('0' + s):s}秒`
       }
      // 开始计时器
      function start(){
        if(flag){ 
          init = setInterval(timers,1000)
        }
        flag=false
      }
      // 重置计时器
      function Reset(){
        flag=true
        window.clearInterval(init)
        h=m=s=0;
        document.getElementById('timetext').value= "00时00分00秒";
        document.getElementById('_h').innerHTML='00时'
        document.getElementById('_m').innerHTML='00分'
        document.getElementById('_s').innerHTML='00秒'
      }
      // 暂停计时器
      function stop(){
      flag=true
      window.clearInterval(init)
      }
  </script>
</head>
<body>
  <div style="text-align: center">
    <input type="text" id="timetext" value="00时00分00秒" readonly><br>
    <span id="_h">00时</span>
    <span id="_m">00分</span>
    <span id="_s">00秒</span>
    <button type="button" onclick="start()">开始</button> <button type="button" onclick="stop()">暂停</button> <button type="button" onclick="Reset()">重置</button>
  </div>
</body>
</html>
上一篇:android各种资源的详细解释


下一篇:kettle 安装mysql 驱动