// 多定时器
js:
(function($){
$.fn.yomi=function(){
var data="";
var _DOM=null;
var TIMER;
createdom =function(dom){
_DOM=dom;
data=$(dom).attr("data");//获取字符串
data=parseInt(data);//转化成数字
$(_DOM).append("<p class='yomi'></p>")
reflash();
};
reflash=function(){
var range = data--,//每秒减1
secday = 86400, sechour = 3600,
days = parseInt(range/secday),
hours = parseInt((range%secday)/sechour),
min = parseInt(((range%secday)%sechour)/60),
sec = parseInt((range%secday)%sechour)%60;
$(_DOM).html('距离结束:'+nol(days)+"天"+nol(hours)+"时"+nol(min)+"分"+nol(sec)+"秒");
if(sec<=0&&hours<=0&&min<=0&&days<=0){
clearInterval(TIMER)
$(_DOM).html('已结束')
}
};
TIMER = setInterval( reflash,1000 );
nol = function(h){
return h>9?h:'0'+h;
}
return this.each(function(){
var $box = $(this);
createdom($box);
});
}
})(jQuery);
$(function(){
$(".yomibox").each(function(){
$(this).yomi();
});
});
html:
<p class="yomibox" data="{$over}"></p> //{$over}获取php后台的时间差
php:
//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set('PRC');
//date_default_timezone_set("Asia/Hong_Kong"); //地区
$time = $auc->field('endtime')->where('pid=1')->select(); //这里举例取了一条结束时间
$nowtime = time(); //服务器当前时间戳
if ($time[0]['endtime']>=$nowtime){ //$time[0]['endtime']查询出来的是2维数据
$overtime = $time[0]['endtime']-$nowtime; //实际剩下的时间(单位/秒)时间差
}else{
$overtime=0;
}
$this->over=$overtime; //over返回给前台的时间差
//单定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<title>倒计时</title>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
(function() {
var box = document.getElementById('box');
// 缓存服务器时间
serverTime = null;
let fn = () => {
// 每秒加 1000
serverTime = serverTime + 1000,
// 获取时间戳
tartime = new Date('2018/8/21 9:55:00').getTime();
// 时间差
spanTime = tartime - serverTime
// 计算 分 钟 秒
if (spanTime <= 0) {
box.innerHTML = '抢购已经开始啦!!!'
clearInterval(autotimer);
return;
}
// 加 0 操作
let hours = Math.floor(spanTime / (1000 * 60 * 60 ));
spanTime -= hours*3600000;
let minus = Math.floor(spanTime / (1000 * 60));
spanTime -= minus * 60000;
let second = Math.floor(spanTime / 1000);
hours < 10 ? hours = '0' + hours : hours;
minus < 10 ? minus = '0' + minus : minus;
second < 10 ? second = '0' + second : second;
box.innerHTML = `距离开抢:${hours}:${minus}:${second}`
}
let autotimer = setInterval(fn,1000);
// 服务器获取时间
let getServerTime = () => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
// 不成功 return
if(!/^(2|3)\d{2}$/.test(xhr.status)) return;
if(xhr.readyState === 2) {
// 将服务器时间转换为时间戳
serverTime = new Date(xhr.getResponseHeader('date')).getTime();
fn();
}
}
xhr.open("head",'temp.php',true);
xhr.send(null);
/*
* 最终目的:缩小时间差
* 1、服务器时间响应头就有,只需要获取响应头信息就行,所以请求方式为head即可
2、必须是异步,同步我们无法在状态2或者3的时候做一些处理,响应头在2的时候就可以获取了,所以异步
*/
}
getServerTime();
})()
</script>
</body>
</html>