qq_19701837 2019-06-02 16:46 采纳率: 70%
浏览 338
已结题

想给倒计时做一个小改动

希望各位帮忙 改一下代码
当点击“开始”时,开始倒计时,此时按钮名称变成“停止”
当点击“停止”时,停止倒计时,按钮文字变成“开始”
与此同时重置按钮不变,在一旁。
麻烦各位大神啦
图片说明

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>一个计时器</title>
    <style>
      #mytime{
        background: #bbb;
        color: black;
        display: block;
         background-color: whitesmoke;
      }
      .wrapper{
        text-align: center;
        width: 30%;
        margin: 250px auto;
        background-color: red;
        border: 4px solid black;

      }
    </style>
  </head>
  <body>
    <div class="wrapper">
    <h1 id=mytime>显示时间</h1>
    <!-- <input id="mytime" type="text" name="" value="显示时间"> -->
    <button id="stop" name="button" onclick="stop()">停止</button>
    <button id="start" name="button" onclick="start()">开始</button>
    <button id="reset" name="button" onclick="reset()">重置</button>
    </div>
  </body>
   <script type="text/javascript">
   var h=m=s=ms= 0;  //定义时,分,秒,毫秒并初始化为0;
   var time=0;

   function timer(){   //定义计时函数
     ms=ms+50;         //毫秒
     if(ms>=1000){
       ms=0;
       s=s+1;         //秒
     }
     if(s>=60){
       s=0;
       m=m+1;        //分钟
     }
     if(m>=60){
       m=0;
       h=h+1;        //小时
     }
     str =toDub(h)+"时"+toDub(m)+"分"+toDub(s)+"秒"+toDubms(ms)+"毫秒";
     mytime = document.getElementById('mytime');
     mytime.innerHTML = str;
   // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
   }
   function reset(){  //重置
     clearInterval(time);
     h=m=s=ms=0;
     document.getElementById('mytime').innerHTML="00时00分00秒0000毫秒";
   }

   function start(){  //开始
     time=setInterval(timer,50);
   }

   function stop(){  //暂停
     clearInterval(time);
   }

   function toDub(n){  //补0操作
     if(n<10){
       return "0"+n;
     }
     else {
       return ""+n;
     }
   }

   function toDubms(n){  //给毫秒补0操作
     if(n<10){
       return "00"+n;
     }
     else {
       return "0"+n;
     }

   }

   </script>

</html>

  • 写回答

2条回答 默认 最新

  • threenewbee 2019-06-02 17:00
    关注
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>一个计时器</title>
        <style>
          #mytime{
            background: #bbb;
            color: black;
            display: block;
             background-color: whitesmoke;
          }
          .wrapper{
            text-align: center;
            width: 30%;
            margin: 250px auto;
            background-color: red;
            border: 4px solid black;
    
          }
        </style>
      </head>
      <body>
        <div class="wrapper">
        <h1 id=mytime>显示时间</h1>
        <!-- <input id="mytime" type="text" name="" value="显示时间"> -->
        <button id="start" name="button" onclick="start()">开始</button>
        <button id="reset" name="button" onclick="reset()">重置</button>
        </div>
      </body>
       <script type="text/javascript">
       var h=m=s=ms= 0;  //定义时,分,秒,毫秒并初始化为0;
       var time=0;
    
       function timer(){   //定义计时函数
         ms=ms+50;         //毫秒
         if(ms>=1000){
           ms=0;
           s=s+1;         //秒
         }
         if(s>=60){
           s=0;
           m=m+1;        //分钟
         }
         if(m>=60){
           m=0;
           h=h+1;        //小时
         }
         str =toDub(h)+"时"+toDub(m)+"分"+toDub(s)+"秒"+toDubms(ms)+"毫秒";
         mytime = document.getElementById('mytime');
         mytime.innerHTML = str;
       // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
       }
       function reset(){  //重置
         clearInterval(time);
         h=m=s=ms=0;
         document.getElementById('mytime').innerHTML="00时00分00秒0000毫秒";
       }
    
       function start(){  //开始
    if(document.getElementById('start').value == "开始"){
         time=setInterval(timer,50);
         document.getElementById('start').value = "停止";
    }else{
        clearInterval(time);
          document.getElementById('start').value = "开始";
    }
       }
    
    
       function toDub(n){  //补0操作
         if(n<10){
           return "0"+n;
         }
         else {
           return ""+n;
         }
       }
    
       function toDubms(n){  //给毫秒补0操作
         if(n<10){
           return "00"+n;
         }
         else {
           return "0"+n;
         }
    
       }
    
       </script>
    
    </html>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)