js实现倒计时器自定义时间和暂停

  

js倒计时器可自定义时间和暂停,效果如下,点击开始开始计时,结束结束计时

  

 js实现倒计时器自定义时间和暂停

  

分别复制H5 css js代码即可实现,具体的算法在js控制函数中(都写了注释)

  css

        html,身体{   宽度:100%;高度:100%;   }   .content {   高度:100%;宽度:100%;   }   .row-center {   显示:flex; flex-direction:行;justify-content:中心;   对齐项目:中心;   }   .tc-input-style {   大纲:没有;边界:没有,宽度:20%;高度:80%;border - radius: 10 px;   }   .tc-span-style {   宽度:30%;高度:100%;粗细:大胆的;   }   .tc-font-style {   字体大小:15 px;粗细:大胆的;   }   .tc-div-style1 {   高度:33%;宽度:100%   }   .tc-div-style0 {   高度:30%;宽度:100%   }   .tc-div-style2 {   高度:10%;宽度:100%;   }   .tc-div-style3 {   高度:100%;宽度:30%   }   .column-center {   显示:flex; flex-direction:列;justify-content:中心;   对齐项目:中心;   }   .column-start-center {   显示:flex; flex-direction:列;justify-content: flex-start;   对齐项目:中心;   }   # timecount {   高度:50%;宽度:20%;   }   .button-style-0 {   border - radius: 10 px;   }   .row-space-around {   显示:flex; flex-direction:行;justify-content:空间;   对齐项目:中心;   }   之前      一直编辑

        & lt; body>   & lt; div类=澳谌輗ow-center”比;      & lt; div id=" timecount " class=" column-center tc-font-style”比;   & lt; div class=" column-start-center tc-div-style0”比;   & lt; div class=" row-center tc-div-style1”祝辞& lt;跨类=皌c-span-style row-center”在小时:& lt;/span> & lt;输入类=tc-input-style id=癶our_count”价值=" https://www.yisu.com/zixun/0 "比;& lt;/div>   & lt; div class=" row-center tc-div-style1”祝辞& lt;跨类=皌c-span-style row-center”祝辞分钟:& lt;/span> & lt;输入类=tc-input-style id=癿inute_count”价值=" https://www.yisu.com/zixun/0 "比;& lt;/div>   & lt; div class=" row-center tc-div-style1”祝辞& lt;跨类=皌c-span-style row-center”祝辞秒:& lt;/span> & lt;输入类=tc-input-style id=皊econd_count”价值=" https://www.yisu.com/zixun/0 "比;& lt;/div>   & lt;/div>      & lt; div class=" row-center tc-div-style2”比;   & lt; div class=" row-center tc-div-style3 " id=" hour_show祝辞& lt;/div>   & lt; div class=" row-center tc-div-style3 " id=" minute_show祝辞& lt;/div>   & lt; div class=" row-center tc-div-style3 " id=" second_show祝辞& lt;/div>   & lt;/div>      & lt; div class=" row-space-around tc-div-style2”比;   & lt;按钮类=" button-style-0 "祝辞start   & lt;按钮类=" button-style-0 "祝辞stop   & lt;/div>      & lt;/div>         & lt;/div>   & lt;/body>   之前      

记得引入金桥

        & lt;脚本src=" https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js "祝辞& lt;/script>   之前      JS

        & lt;脚本type=" text/javascript祝辞   var timecount;//定义一个全局变量   函数计时器(intDiff) {//定义一个循环函数每一秒定时执行   timecount=setInterval(函数(){   乏时=0,   分钟=0,   第二个=0;//初始化时间默认值//算法控制   如果(intDiff比;0){   小时=数学。地板(intDiff/(60 * 60));   分钟=数学。地板(intDiff/60) -(小时* 60);   第二个=Math.floor (intDiff) -(小时* 60 * 60)(分钟* 60);   }   如果(分钟& lt;=9)分钟=' 0 ' +分钟;   如果(第二& lt;=9)第二=' 0 ' +第二;//打印到dom   $ (' # hour_show ') . html (' & lt; s id=" h "祝辞& lt;/s>“+小时+“时”);   $ (' # minute_show ') . html (' & lt; s> & lt;/s> +分钟+“分”);   $ (' # second_show ') . html (' & lt; s> & lt;/s> +第二+“秒”);   intDiff——;   }, 1000);   console.log (intDiff);   }      函数timecounts () {   console.log ($ (" # hour_count”) .val ())   数=方法($ (" # hour_count ") .val() * 3600) +方法($ (" # minute_count ") .val() * 60) +方法($ (" # second_count ") .val ())   计时器(计数);//调用计时器函数   console.log(数);   }   函数timestop () {   乏时=$ (" # hour_show”)。text ();   var分钟=$ (" # minute_show”)。text ();   var第二=$ (" # second_show”)。text ();   var时间=方法($ (" # hour_show ")。text()) * 3600 +方法($ (" # minute_show ")。text()) * 60 +方法($ (" # second_show ")。text ())   console.log(时间);   timecount=window.clearInterval (timecount);//停止计时器   }   & lt;/script>   

js实现倒计时器自定义时间和暂停