js倒計(jì)時(shí)器可自定義時(shí)間和暫停，效果如下，點(diǎn)擊start 開始計(jì)時(shí)，end結(jié)束計(jì)時(shí)
分別復(fù)制 H5 css js 代碼即可實(shí)現(xiàn)，具體的算法在js控制函數(shù)中（都寫了注釋）
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 class="content row-center"> <div id="timecount" class="column-center tc-font-style" > <div class="column-start-center tc-div-style0" > <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">小時(shí):</span><input class=tc-input-style id="hour_count" value="0"> </div> <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">分鐘:</span><input class=tc-input-style id="minute_count" value="0"> </div> <div class="row-center tc-div-style1" ><span class="tc-span-style row-center">秒:</span><input class=tc-input-style id="second_count" value="0"> </div> </div> <div class="row-center tc-div-style2"> <div class="row-center tc-div-style3" id="hour_show" ></div> <div class="row-center tc-div-style3" id="minute_show"></div> <div class="row-center tc-div-style3" id="second_show"></div> </div> <div class="row-space-around tc-div-style2"> <button class="button-style-0" onclick="timecounts()">start</button> <button class="button-style-0" onclick="timestop()">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;//定義一個(gè)全局變量function timer(intDiff){ //定義一個(gè)循環(huán)函數(shù)每一秒定時(shí)執(zhí)行 timecount=setInterval(function(){ var hour=0, minute=0, second=0;//初始化時(shí)間默認(rèn)值 //算法控制 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 id="h"></s>'+hour+'時(shí)'); $('#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);//調(diào)用計(jì)時(shí)器函數(shù) 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);//停止計(jì)時(shí)器}</script>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
