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实现倒计时器自定义时间和暂停