倒计时插件
2019-07-02 本文已影响0人
王远清orz
<span class="count-down">
<span class="day">0</span> 天
<span class="hour">0</span> 时
<span class="minute">0</span> 分
<span class="sec">0</span> 秒
</span>
(function ($) {
$.fn.extend({
countDown: function (options) {
var defaults = {
day: '.day',
hour: '.hour',
minute: '.minute',
sec: '.sec'
},
opts = $.extend({}, defaults, options); //对象扩展到opts
this.each(function () { //遍历
var $this = $(this);
times(); //先执行一次,防止刷新时数字都显示为0
var timer = setInterval(times, 1000); //定时器执行
function times() {
var nowDate = Math.round(new Date().getTime() / 1000).toString();//js返回的时间戳是13位,转换成10位
endDate = '{$data["expiration"]}';//后台给的时间戳数值,PHP返回的时间戳值是10位
tms = endDate - nowDate, //时间差
days = Math.floor(tms / 60 / 60 / 24),
hours = Math.floor(tms / 60 / 60 % 24),
minutes = Math.floor(tms / 60 % 60),
secs = Math.floor(tms % 60);
if (tms > 0) { //如果时间差大于0,显示倒计时
$this.find(opts.day).text(addZero(days));
$this.find(opts.hour).text(addZero(hours));
$this.find(opts.minute).text(addZero(minutes));
$this.find(opts.sec).text(addZero(secs));
} else { //否则清除定时器,倒计时结束
clearInterval(timer);
}
}
});
function addZero(t) { //一位数加0
if (t < 10) {
return t = '0' + t;
} else {
return t;
}
}
return this; //返回this方便链式调用
}
});
$('.count-down').countDown(); //默认调用方法
})(jQuery)
最主要记住,JS获取时间戳new Date().getTime()方法返回的是13位数,Java13位,PHP是10位,需要转换
附上js获取时间戳方法
var ts = Date.parse(new Date());
// ts 得到永远 xxx000 1493269366000 毫秒部分以000表示
//得到具体的毫秒:
var ts = (new Date()).valueOf(); //1280977330748
ts = new Date().getTime(); // 同上
// 得到10位数
ts = Math.round(new Date().getTime()/1000).toString();