一, 首先 demo 是当天倒计时, 初始化的时候只需要从后台服务器取出对应的开始时间戳和结束时间戳就可以了, 当然我这里取的是本地时间
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 倒计时兼容 </title>
- </head>
- <body>
- <div class="box">
- <span id="count_day"></span > 天
- <span id="count_hour"></span>:
- <span id="count_minute"></span>:
- <span id="count_second"></span>
- </div>
- <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
- <script>
- $(function(){
- function addZero(num){// 格式化 1 位时间, 自动补 0
- return (''+ num).length <2 ? ((new Array(2 + 1)).join('0') + num).slice(-2) :'' + num;
- }
- var CountDown = function(options){
- /*
- startDate 开始时间 *
- endDate 结束时间 *
- domD 天数 DOM
- domH 时钟数 DOM
- domM 分钟数 DOM
- domS 秒钟数 DOM
- */
- this.interval = 1000;
- this.startDate = options.startDate;
- this.endDate = options.endDate;
- this.timer = 0;
- this.domD = document.getElementById(options.domD) || document.getElementById('count_day');
- this.domH = document.getElementById(options.domH) || document.getElementById('count_hour');
- this.domM = document.getElementById(options.domM) || document.getElementById('count_minute');
- this.domS = document.getElementById(options.domS) || document.getElementById('count_second');
- this.init();
- return this;
- };
- CountDown.prototype = {
- init: function(){
- var self = this;
- self.leftTime = self.endDate - self.startDate;
- if(self.leftTime>= 0){ // 判断未到结束时间
- self.count();
- }
- },
- count : function(){
- var self = this;
- if(self.leftTime>= 0){
- self.day = Math.floor(self.leftTime/1000/60/60/24);
- self.hour = Math.floor(self.leftTime/1000/60/60%24);
- self.minute = Math.floor(self.leftTime/1000/60%60);
- self.second = Math.floor(self.leftTime/1000%60);
- self.domD.innerHTML = self.day;
- self.domH.innerText = addZero(self.hour);
- self.domM.innerText = addZero(self.minute);
- self.domS.innerText = addZero(self.second);
- self.timer = window.setInterval(function(){
- window.clearInterval(self.timer);
- self.leftTime -= self.interval;
- self.count();
- }, self.interval);
- }
- }
- }
- //var startT = _cfg['now']*1000;
- var date = new Date();
- var Y = date.getFullYear() + '/';
- var M = addZero(date.getMonth()+1) + '/';
- var D = date.getDate() + ' ';
- var h = addZero(date.getHours()) + ':';
- var m = addZero(date.getMinutes()) + ':';
- var s = addZero(date.getSeconds());
- var curr = (Y+M+D+h+m+s).split(/[- : \/]/);
- var startT = new Date(curr[0], curr[1]-1, curr[2], curr[3], curr[4], curr[5]);
- var arr = (Y+M+D+'23'+':'+'59'+':'+'59').split(/[- : \/]/);
- var date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
- if($('#count_hour').length){
- new CountDown({
- endDate: date.getTime(),
- startDate: startT.getTime()
- });
- }
- })
- </script>
- </body>
- </html>
ps: 上述代码中可以看到在获取时间戳的时候使用了 split 方法, 使用这个方法的目的是为了兼容 iPhone 手机浏览器
来源: http://www.qdfuns.com/note/18313/911d93e36d74ea4af56e7b205c548654.html