基于服务器时间的倒计时功能js

来源：互联网发布：唯一网络王宇杰豪车编辑：程序博客网时间：2024/05/14 15:04

据客户要求做一个3月1号至3月17号的倒计时抢票功能，在此期间只有10-11点之间才能开放抢票功能，其余时间不开放功能，皆显示倒计时。
Html 代码：
<!DOCTYPE HTML>
<html>
<head>
<title>使用javascript做基于服务器时间的倒计时</title>
<script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
距离<span id="today">00月00日</span>10点整还有 <span id="day">00</span>天
<span id="hours">00</span>时
<span id="minutes">00</span>分 <span id="seconds">00</span>秒
</body>
</html>
<script language="javascript" type="text/javascript">
//月份数组
var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
//定义全局变量：服务器时间（毫秒）
var ServerTime = GetServerTime();
/*
* 设定预定日期
* year 年份
* month 月份
* day 天数
* hours 小时数
*/
var year = 2013;
var month = 3;
var day = 1;
var hours = 10;
//页面载入时执行
$(function () {
_OnLoad(ServerTime);
})
//获取当前服务器时间的毫秒数
function GetServerTime() {
return Date.parse(GetServerTimeToDate());
}
//获取服务器时间的Date对象
function GetServerTimeToDate() {
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", "null.txt", false);
xmlHttp.setRequestHeader("Range", "bytes=-1");
xmlHttp.send(null);
return new Date(xmlHttp.getResponseHeader("Date"));
}
/*页面载入执行函数
　　* Millisecond 服务器时间毫秒数
　　*/
function _OnLoad(Millisecond) {
//服务器时间
var today = new Date(Millisecond - hours * 60 * 60 * 1000);
var todayy = today.getYear();
if (todayy < 1000) {
todayy += 1900;
}
var todaym = today.getMonth();
var todayd = today.getDate();
var todayh = today.getHours();
var todaymin = today.getMinutes();
var todaysec = today.getSeconds();
//判断当前时间是否为大于2013.3.17日
if (todayy == 2013 && todaym == 2 && todayd <= 17) {
if (todayh + 10 <= 10) {
document.getElementById("today").innerHTML = "0" + (todaym + 1) + "月" + (todayd < 10 ? "0" + todayd : todayd) + "日";
} else {
document.getElementById("today").innerHTML = "0" + (todaym + 1) + "月" + (todayd + 1 < 10 ? "0" + (todayd + 1) : todayd + 1) + "日";
}
} else {
document.getElementById("today").innerHTML = "03月01日";
}
//当前服务器时间
var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
//设定时间（设定时间是一个时间段，故从3月1号开始，设定时间天数+1）
futurestring = montharray[month - 1] + " " + (todayd + 1) + ", " + year;
//获取时间差的毫秒数
dd = Date.parse(futurestring) - Date.parse(todaystring);
dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
//页面显示效果逻辑部分
//var a_go = document.getElementById("a_go");
if (todaym == 2 && todayd >= 1 && todayd <= 17 && todayh + hours == hours) {
//if (!a_go.getAttribute("class")) {
// a_go.setAttribute("class", "letsgo");
// a_go.setAttribute("href", "javascript:div_open();");
//}
document.getElementById("day").innerHTML = "00";
document.getElementById("hours").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
document.getElementById("seconds").innerHTML = "00";
}
else if (todaym == 2 && todayd > 17) {
//$("#a_go").removeAttr("class");
//a_go.setAttribute("href", "javascript:void(0);");
document.getElementById("day").innerHTML = "00";
document.getElementById("hours").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
document.getElementById("seconds").innerHTML = "00";
}
else {
//$("#a_go").removeAttr("class");
//a_go.setAttribute("href", "javascript:void(0);");
document.getElementById("day").innerHTML = dday < 10 ? ("0" + dday) : dday;
document.getElementById("hours").innerHTML = dhour < 10 ? ("0" + dhour) : dhour;
document.getElementById("minutes").innerHTML = dmin < 10 ? ("0" + dmin) : dmin;
document.getElementById("seconds").innerHTML = dsec < 10 ? ("0" + dsec) : dsec;
}
//每隔一秒自动+1
ServerTime = ServerTime + 1000;
setTimeout("_OnLoad(" + ServerTime + ")", 1000);
}
</script>

0 0