时分秒计时器 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" οnclick="start()">开始</button> <button type="button" οnclick="stop()">暂停</button> <button type="button" οnclick="Reset()">重置</button>
  </div>
</body>
</html>

转载于:https://www.cnblogs.com/wgy0528/p/10772930.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值