js實現(xiàn)倒計時器自定義時間和暫停

更新時間：2019年02月25日 11:39:00 作者：白馬湖小龍王

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)倒計時器自定義時間和暫停，具有一定的參考價值，感興趣的小伙伴們可以參考一下

js倒計時器可自定義時間和暫停，效果如下，點擊start 開始計時，end結(jié)束計時

分別復(fù)制 H5 css js 代碼即可實現(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;
}

<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">小時:</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>

<script type="text/javascript">
var timecount;//定義一個全局變量
function timer(intDiff){
 //定義一個循環(huán)函數(shù)每一秒定時執(zhí)行
 timecount=setInterval(function(){
 var hour=0,
 minute=0,
 second=0;//初始化時間默認(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+'時');
 $('#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)用計時器函數(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);//停止計時器
}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: