javascript 實(shí)現(xiàn) 秒殺,團(tuán)購(gòu) 倒計(jì)時(shí)展示的記錄 分享
更新時(shí)間：2013年07月12日 15:13:53 作者：
這篇文章介紹了javascript 實(shí)現(xiàn) 秒殺,團(tuán)購(gòu) 倒計(jì)時(shí)展示的記錄方法，有需要的朋友可以參考一下
最近做了一個(gè)房產(chǎn)的秒殺，團(tuán)購(gòu)的電子商務(wù)網(wǎng)站(房子也有秒殺，出手不小啊)，其中里面有一個(gè)秒殺的倒計(jì)時(shí)展示，主要是判斷當(dāng)前時(shí)間距離秒殺開(kāi)始還有多少時(shí)間，還有秒殺開(kāi)始和秒殺結(jié)束的各種展示。
其中最主要的一點(diǎn)就是所謂的當(dāng)前時(shí)間不能使用瀏覽器通過(guò)new Date()獲取的客戶端時(shí)間，這樣只要用戶修改了自己的機(jī)器時(shí)間那么倒計(jì)時(shí)就會(huì)亂透了，所以這個(gè)當(dāng)前時(shí)間必須使用的是服務(wù)器時(shí)間，所以采用的是靜態(tài)緩存頁(yè)面所以這個(gè)當(dāng)前時(shí)間使用ajax方式進(jìn)行獲取
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta content="all" name="robots" />
<meta name="author" content="" />
</head>
<body onload='start()'>
.
距活動(dòng)開(kāi)始還有：<span id="sk_time"></span> <!-- 這個(gè)是倒計(jì)時(shí)的顯示 -->
.
<br/>
<span id="wyz">
<span class="btn_02"> 參加秒殺?。。?amp;nbsp; </span> <!-- 這個(gè)是秒殺按鈕，倒計(jì)時(shí)為0時(shí)會(huì)變成可以秒殺的樣式 -->
</span>
.
<script type="text/javascript">
var msbegintime = "1323446400000"; //這個(gè)是活動(dòng)開(kāi)始的時(shí)間戳
var msendtime = "1325174400000"; //這個(gè)是活動(dòng)結(jié)束的時(shí)間戳
function start(){
callBackServerTime("sk_time", "wyz", msbegintime, msendtime);
}
//_showtimediv:時(shí)間顯示區(qū)域，_showqdiv：狀態(tài)顯示區(qū)域
//這個(gè)向服務(wù)器發(fā)送一個(gè)ajax請(qǐng)求，服務(wù)器返回服務(wù)器當(dāng)前的時(shí)間戳，也就是xmlobj.responseText是一個(gè)服務(wù)器的時(shí)間戳
function callBackServerTime(_showtimediv, _showqdiv, _ms_begintime, _ms_endtime) {
var now = new Date();
var urlstr = "random=" + Math.round(Math.random() * 10000000);
var ajaxobj = new AJAXRequest; // 創(chuàng)建AJAX對(duì)象
ajaxobj.method = "GET"; // 設(shè)置請(qǐng)求方式為GET
ajaxobj.url = "/gz/source/getServerTime.do?" + urlstr; //注意ajax的跨域問(wèn)題
ajaxobj.callback = function(xmlobj) {
//ShowQTime(xmlobj.responseText, _showtimediv, _showqdiv, _ms_begintime, _ms_endtime, _tryid,sourceid);
ShowQTime( _showtimediv, _showqdiv,"1323158067288", _ms_begintime, _ms_endtime); // 這里使用靜態(tài)數(shù)字替代 xmlobj.responseText 方便測(cè)試
}
ajaxobj.send(); // 發(fā)送請(qǐng)求
}
//動(dòng)態(tài)顯示”秒殺“時(shí)間函數(shù)
function ShowQTime(_showtimediv, _showqdiv, _nowtime, _ms_begintime, _ms_endtime) {
_nowtime = Number(_nowtime);
var timmer = Math.floor((_ms_endtime - _nowtime) / (1000));
if (_nowtime >= _ms_begintime && timmer > 0) {;
//秒殺進(jìn)行中
document.getElementById(_showtimediv).innerHTML = "<span class='pim_time'>0</span>天<span class='pim_time'>0</span>小時(shí)<span class='pim_time'>0</span>分鐘<span class='pim_time'>0</span>秒";
document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'> 秒殺開(kāi)始了?。。?amp;nbsp; </a></span>";
} else {
//秒殺倒計(jì)時(shí)
var nMS = _ms_begintime - _nowtime; //計(jì)算出開(kāi)始時(shí)間和現(xiàn)在時(shí)間的時(shí)間戳差
var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));
var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;
var nM = Math.floor(nMS / (1000 * 60)) % 60;
var nS = Math.floor(nMS / 1000) % 60;
var nMS = Math.floor(nMS / 100) % 10;
if (nD >= 0) {
var _timestr = "";
var snd = nD.toString();
if (snd.length == 1) {
snd = "0" + snd;
}
_timestr += "<span class='pim_time'>" + snd.substring(0, 1) + snd.substring(1, 2) +"</span>天";
var snH = nH.toString();
if (snH.length == 1) {
snH = "0" + snH;
}
_timestr += "<span class='pim_time'>" + snH.substring(0, 1) + snH.substring(1, 2) +"</span>小時(shí)";
var snM = nM.toString();
if (snM.length == 1) {
snM = "0" + snM;
}
_timestr += "<span class='pim_time'>" + snM.substring(0, 1) + snM.substring(1, 2) +"</span>分鐘";
var snS = nS.toString();
if (snS.length == 1) {
snS = "0" + snS;
}
_timestr += "<span class='pim_time'>" + snS.substring(0, 1) + snS.substring(1, 2) +"</span>秒";
document.getElementById(_showtimediv).innerHTML = _timestr;
}else {
//秒殺結(jié)束
document.getElementById(_showtimediv).innerHTML = "<span class='pim_time'>0</span>天<span class='pim_time'>0</span>小時(shí)<span class='pim_time'>0</span>分鐘<span class='pim_time'>0</span>秒";
document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'> 秒殺結(jié)束了?。。?amp;nbsp; </a></span>";
}
}
//注意 (_nowtime + 1000) 增加 1 秒
setTimeout("ShowQTime('" + _showtimediv + "','" + _showqdiv + "','" + (_nowtime + 1000) + "','" + _ms_begintime + "','" + _ms_endtime + "')", 1000);
}
function AJAXRequest() {
var xmlObj = false;
var CBfunc,ObjSelf;
ObjSelf=this;
try { xmlObj=new XMLHttpRequest; }
catch(e) {
try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); }
catch(e2) {
try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e3) { xmlObj=false; }
}
}
if (!xmlObj) return false;
this.method="POST";
this.url;
this.async=true;
this.content="";
this.callback=function(cbobj) {return;}
this.send=function() {
if(!this.method||!this.url||!this.async) return false;
xmlObj.open (this.method, this.url, this.async);
if(this.method=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlObj.onreadystatechange=function() {
if(xmlObj.readyState==4) {
if(xmlObj.status==200) {
ObjSelf.callback(xmlObj);
}
}
}
if(this.method=="POST") xmlObj.send(this.content);
else xmlObj.send(null);
}
}
</script>
</body>
</html>
您可能感興趣的文章:
- JS腳本實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)秒殺點(diǎn)擊
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)（時(shí)間與服務(wù)器時(shí)間同步）
- 如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)功能
- js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
- Docker + Nodejs + Kafka + Redis + MySQL搭建簡(jiǎn)單秒殺環(huán)境
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- JS實(shí)現(xiàn)商城秒殺倒計(jì)時(shí)功能(動(dòng)態(tài)設(shè)置秒殺時(shí)間)
- JavaScript仿京東秒殺倒計(jì)時(shí)
- JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效
- JavaScript定時(shí)器實(shí)現(xiàn)限時(shí)秒殺功能
相關(guān)文章
詳解微信小程序-canvas繪制文字實(shí)現(xiàn)自動(dòng)換行
這篇文章主要介紹了微信小程序canvas繪制文字實(shí)現(xiàn)自動(dòng)換行，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序常見(jiàn)頁(yè)面跳轉(zhuǎn)操作簡(jiǎn)單示例
這篇文章主要介紹了微信小程序常見(jiàn)頁(yè)面跳轉(zhuǎn)操作,結(jié)合簡(jiǎn)單實(shí)例形式總結(jié)分析了微信小程序保留頁(yè)面跳轉(zhuǎn)、關(guān)閉頁(yè)面跳轉(zhuǎn)、返回上一級(jí)頁(yè)面等各種常見(jiàn)的跳轉(zhuǎn)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
JavaScript實(shí)現(xiàn)多重繼承的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)多重繼承的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)多重繼承的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
原生JavaScript實(shí)現(xiàn)todolist功能
本篇文章給大家介紹了通過(guò)原生JavaScript實(shí)現(xiàn)todolist功能相關(guān)知識(shí)點(diǎn)，對(duì)此有需要的朋友可以學(xué)習(xí)下。2018-03-03
淺談JavaScript的自動(dòng)垃圾收集機(jī)制
本文主要對(duì)JavaScript的自動(dòng)垃圾收集機(jī)制進(jìn)行簡(jiǎn)要分析，并介紹了垃圾收集的方式：標(biāo)記清除（mark-and-sweep）和引用計(jì)數(shù)（reference counting），需要的朋友一起來(lái)看下吧2016-12-12
去除JavaScript對(duì)象中空值和空對(duì)象的四種方式
開(kāi)發(fā)時(shí)遇到一個(gè)問(wèn)題,需要將對(duì)象中的空值和空對(duì)象去除,所以這篇文章主要給大家介紹了關(guān)于去除JavaScript對(duì)象中空值和空對(duì)象的四種方式,需要的朋友可以參考下2023-09-09
JavaScript語(yǔ)言中的Literal Syntax特性分析
JavaScript語(yǔ)言中的Literal Syntax特性分析...2007-03-03
JavaScript箭頭函數(shù)的五種使用方法及三點(diǎn)注意事項(xiàng)
這篇文章主要介紹了JavaScript箭頭函數(shù)的五種使用方法及三點(diǎn)注意事項(xiàng),箭頭函數(shù)是ES6新增的定義函數(shù)的方式,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，需要的朋友可以參考一下2022-08-08
js實(shí)現(xiàn)的點(diǎn)擊div區(qū)域外隱藏div區(qū)域
這篇文章主要介紹了通過(guò)js實(shí)現(xiàn)點(diǎn)擊div區(qū)域外隱藏div區(qū)域，原理及示例代碼如下2014-06-06
封裝了一個(gè)支持匿名函數(shù)的Javascript事件監(jiān)聽(tīng)器
這篇文章主要介紹了支持匿名函數(shù)的Javascript事件監(jiān)聽(tīng)封裝,需要的朋友可以參考下2014-06-06