js實現倒計時功能
阿新 • • 發佈：2019-01-27
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>無標題頁</title> </head> <body> <span id="bb"></span> <span id="div1"></span> </body> <script type="text/javascript"> //將字串格式化為時間 function parseDate(str) { var bb = document.getElementById("bb"); if (typeof str == 'string') { var results = str.match(/^ *(\d{4})-(\d{1,2})-(\d{1,2}) *$/); if (results && results.length > 3) return new Date(parseInt(results[1], 10), parseInt(results[2], 10) - 1, parseInt(results[3], 10)); results = str.match(/^ *(\d{4})-(\d{1,2})-(\d{1,2}) +(\d{1,2}):(\d{1,2}):(\d{1,2}) *$/); if (results && results.length > 6) return new Date(parseInt(results[1], 10), (parseInt(results[2], 10) - 1), parseInt(results[3], 10), parseInt(results[4], 10), parseInt(results[5], 10), parseInt(results[6], 10)); results = str.match(/^ *(\d{4})-(\d{1,2})-(\d{1,2}) +(\d{1,2}):(\d{1,2}):(\d{1,2})\.(\d{1,9}) *$/); if (results && results.length > 7) return new Date(parseInt(results[1], 10), parseInt(results[2], 10) - 1, parseInt(results[3], 10), parseInt(results[4], 10), parseInt(results[5], 10), parseInt(results[6], 10), parseInt(results[7], 10)); } return null; } //倒計時 deadline：截止日期，要求格式為：yyyy-MM-dd 或者 yyyy-MM-dd HH:mm:ss或者 yyyy-MM-dd HH:mm:ss.ms // divname：倒計時要顯示的位置 // type：1：顯示精確到分；0：顯示精確到秒 // msg1、msg2：當倒計時分別不為0、為0時顯示的提示資訊 function ShowCountDown(deadline, divname, type, msg1, msg2) { var cc = document.getElementById(divname); var now = new Date(); var endDate = parseDate(deadline); if (endDate != null) { var leftTime = endDate.getTime() - now.getTime(); if (leftTime > 0) { var leftsecond = parseInt(leftTime / 1000); var day = Math.floor(leftsecond / (60 * 60 * 24)); var hour = Math.floor((leftsecond - day * 24 * 60 * 60) / 3600); var minute = Math.floor((leftsecond - day * 24 * 60 * 60 - hour * 3600) / 60); var second = Math.floor(leftsecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60); if (cc != null) { if (type == 1) {cc.innerHTML = msg1 + day + "天" + hour + "小時" + minute + "分"+ second + "秒";} else { cc.innerHTML = msg1 + day + "天" + hour + "小時" + minute + "分" + second + "秒"; } } } else { cc.innerHTML = msg2; } } } //應用 var interval = 1000; window.setInterval(function() { ShowCountDown('2013-1-4 15:36:00', 'div1', 1,'距停止報名還有 ', '活動已結束'); }, interval); </script> </html>