html和js中实现倒计时功能

来源：高士教育

倒计时主要用到的知识点：1、设置时间间隔的setInterval可以被clearInterval取消

　　　　　　　　　　　　2、毫秒转换为时分格式

　　　　　　　　　　　　　　　　这个是效果图　　　

　　下面是js中的函数

var shijian=3600;
 var time=null;
 function start(){
 time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔
 }
 
 function count(){
 if(shijian<0){
 alert("time out");
 pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。
 }else{
 $("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式
 shijian--;
 console.info(time);
 }
 }
 function pause(){
 clearInterval(time);
 }
 function goOn(){
 time = setInterval("count()",1000);//重新设置时间间隔
 }

第二个是html资源，为了方便我css直接写在html中了

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="1.js"></script>
 <script src="jquery-1.8.3.min.js"></script>
 <style type="text/css">
 input{
 background-color: #9fc5f1;
 width: 100px; 
 height: 30px; 
 line-height: 30px; 
 text-align: center; 
 color: #fff; 
 font-size:14px; 
 font-weight: bold;
 }
 #time p{
 color: #1f6dc2;
 font-size: 48px; 
 font-weight: bold;
 margin-left:90px;
 margin-bottom:0px;
 }
 </style>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="time">
 <p>00:00</p>
 <input type="button" value="开始" onclick="start()"/>
 <input type="button" value="暂停" onclick="pause()"/>
 <input type="button" value="继续" onclick="goOn()"/>
</div>
</body>
</html>