分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释）
css
html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center; } .tc-input-style{ outline:none;border:none;width:20%;height:80%;border-radius:10px; } .tc-span-style{ width:30%;height:100%;font-weight:bold; } .tc-font-style{ font-size:15px;font-weight:bold; } .tc-div-style1{ height:33%;width:100% } .tc-div-style0{ height:30%;width:100% } .tc-div-style2{ height:10%;width:100%; } .tc-div-style3{ height:100%;width:30% } .column-center{ display:flex;flex-direction:column;justify-content:center; align-items:center; } .column-start-center{ display:flex;flex-direction:column;justify-content:flex-start; align-items:center; } #timecount{ height:50%;width:20%; } .button-style-0{ border-radius:10px; } .row-space-around{ display:flex;flex-direction:row;justify-content:space-around; align-items:center; }
h5
<body> <div> <div > <div > <div ><span>小时:</span><input class=tc-input-style value="0"> </div> <div ><span>分钟:</span><input class=tc-input-style value="0"> </div> <div ><span>秒:</span><input class=tc-input-style value="0"> </div> </div> <div> <div ></div> <div></div> <div></div> </div> <div> <button>start</button> <button>stop</button> </div> </div> </div> </body>
记得引入jq
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
JS
<script type="text/javascript"> var timecount;//定义一个全局变量 function timer(intDiff){ //定义一个循环函数每一秒定时执行 timecount=setInterval(function(){ var hour=0, minute=0, second=0;//初始化时间默认值 //算法控制 if(intDiff > 0){ hour = Math.floor(intDiff / (60 * 60)) ; minute = Math.floor(intDiff / 60) - (hour * 60); second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60); } if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; //打印到dom $('#hour_show').html('<s></s>'+hour+'时'); $('#minute_show').html('<s></s>'+minute+'分'); $('#second_show').html('<s></s>'+second+'秒'); intDiff--; }, 1000); console.log(intDiff); } function timecounts(){ console.log($("#hour_count").val()) count=parseInt($("#hour_count").val()*3600)+parseInt($("#minute_count").val()*60)+parseInt($("#second_count").val()) timer(count);//调用计时器函数 console.log(count); } function timestop(){ var hour= $("#hour_show").text(); var minute= $("#minute_show").text(); var second= $("#second_show").text(); var time=parseInt($("#hour_show").text())*3600+parseInt($("#minute_show").text())*60+parseInt($("#second_show").text()) console.log(time); timecount=window.clearInterval(timecount);//停止计时器 } </script>