想给倒计时做一个小改动 10C

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

<!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个回答

<!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>
dabocaiqq
请你们大家多多姿瓷我菠菜菌 这个办法最好!
9 个月之前 回复
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 回复qq_19701837: value修改为InnerHTML试试看
9 个月之前 回复
qq_19701837
qq_19701837 功能实现了,但是字没有改变。大神有办法么
9 个月之前 回复

你好,2个按钮即可,停止变成开始,开始变成停止就可。

希望采纳!

图片说明

复制即可:

<!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: #1667e8;
        border: 4px solid red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
    <h1 id=mytime>时间</h1>
    <button id="starts" name="button" onclick="starts()" value="开始">开始</button>
    <button id="resets" name="button" onclick="resets()">重置</button>
    </div>
  </body>
   <script type="text/javascript">
   var h=m=s=ms= 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;
   }

   function resets(){  
     clearInterval(time);
     h=m=s=ms=0;
     document.getElementById('mytime').innerHTML="00时00分00秒0000毫秒";
   }

   function starts(){  
if(document.getElementById('starts').value == "开始"){
     time=setInterval(timer,50);
      document.getElementById('starts').value = "停止";
      document.getElementById('starts').children[0].innerHTML = "停止";
}else{
    clearInterval(time);
      document.getElementById('starts').value = "开始";
      document.getElementById('starts').children[0].innerHTML = "开始";
}
   }


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

   function toDubms(n){  
     if(n<10){
       return "00"+n;
     }
     else {
       return "0"+n;
     }

   }
   </script>
</html>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问