<?php
$act = $_REQUEST['act'];
if($act == 'time') {
//echo time();
echo date('Y-m-d H:i:s');
exit;
}
?>
<!doctype html>
<html>
<head>
<title>抢购微路由工程机,倒计时</title>
<meta name="keywords" content="抢购微路由工程机,智能路由器领导品牌" />
<meta name="description" content="抢购微路由工程机,智能路由器领导品牌" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/js/jquery-1.4.2.min.js"></script>
</head>
<body>
<h2>商品1 </h2>
<p class="buy_time" endTime="2014-03-24 11:40:00">
离抢购时间:<br />
<b>0</b>天<b>0</b>小时<b>0</b>分<b>0.0</b>秒
<input type="button" class="btn" value="即将开始" />
</p>
<h2>商品2</h2>
<p class="buy_time" endTime="2013-10-25 18:10:45">
离抢购时间:<br />
<b>0</b>天<b>0</b>小时<b>0</b>分<b>0.0</b>秒
<input type="button" class="btn" value="即将开始" />
</p>
<h2>商品3</h2>
<p class="buy_time" endTime="2014-5-25 18:10:45">
离抢购时间:<br />
<b>0</b>天<b>0</b>小时<b>0</b>分<b>0.0</b>秒
<input type="button" class="btn" value="即将开始" />
</p>
<script type="text/javascript">
var sysTime = '<?php echo date('Y-m-d H:i:s');?>'; //服务器时间
$(document).ready(function() {
//初始化所有的抢购计数器
$(".buy_time").each(function(i) {
var endTime = $(this).attr("endTime"); //结束时间
$(this).clock(endTime, callback); //倒计时
});
setInterval(getSystemTime, 30000); //每5分钟请求获取服务器时间
});
</script>
<script>
//倒计时
$.fn.clock = function(endTime, callback) {
this.each(function() {
var _this = this,
_time = {},
_sysTime = '',
getMS = function(s) {
var t = getStrTime(s);
return new Date(t.YY, t.MM - 1, t.DD, t.hh, t.mm, t.ss).getTime();
},
getRS = function() {
if (_sysTime != sysTime) {
_sysTime = sysTime;
return getMS(endTime) - getMS(sysTime);
} else {
return _time.rs - 100;
}
},
countDown = function() {
_time.rs = getRS();
if (_time.rs >= 0) {
_time.dd = Math.floor(_time.rs / 1000 / 60 / 60 / 24);
_time.hh = Math.floor(_time.rs / 1000 / 60 / 60 % 24);
_time.mm = Math.floor(_time.rs / 1000 / 60 % 60);
_time.ss = Math.floor(_time.rs / 1000 % 60);
_time.ds = Math.floor(_time.rs / 100 % 10);
$(_this).find("b").eq(0).html(_time.dd);
$(_this).find("b").eq(1).html(_time.hh);
$(_this).find("b").eq(2).html(_time.mm);
$(_this).find("b").eq(3).html(_time.ss + "." + _time.ds);
}
callback.call(_this, _time);
if (_time.rs <= 0) {
clearTimeout($(_this).data('clock_timer'));
}
else {
$(_this).data('clock_timer', setTimeout(countDown, 100));
}
};
clearTimeout($(_this).data('clock_timer'));
countDown();
});
};
function getStrTime(s) {
var a = s.split(' '),
d = a[0].split('-'),
t = a[1].split(':');
return {
YY: d[0],
MM: d[1],
DD: d[2],
hh: t[0],
mm: t[1],
ss: t[2]
};
}
//请求服务器时间
function getSystemTime() {
$.ajax({
url: '/huodong/huodong3.php?act=time&r=' + Math.random(),
type: "get",
dataType: "text",
success: function(result) {
sysTime = result;
}
});
}
//回调方法
function callback(time) {
if (time.rs < 0) {
$(this).find(".btn").val("已经结束").unbind();
}
else if (time.rs == 0) {
$(this).find(".btn").val("马上抢购").unbind().click(function() { alert("恭喜,成功抢购!") });
}
else if (time.rs <= 30000) {
$(this).find(".btn").val(time.ss + "." + time.ds + "秒");
}
}
</script>
</body>
</html>
使用时请注意商品标签上的endTime。