這個特效比較簡單，高手勿噴
倒計時主要用到的知識點：
1、設置時間間隔的setInterval可以被clearInterval取消
2、毫秒轉換為時分格式
效果如圖
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文件代碼
<!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><p id="time"> <p>00:00</p> <input type="button" value="開始" onclick="start()"/> <input type="button" value="暫停" onclick="pause()"/> <input type="button" value="繼續" onclick="goOn()"/></p></body></html>弄到本地看看效果吧
以上就是js如何實現倒計時功能 JS倒計時代碼的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
