论坛首页 Web前端技术论坛

一个页面多个倒计时js代码

浏览 3209 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-04-15  
粗略的整理下

解决需求:
1.解决一个页面多个倒计时
2.每隔一段时间与服务器校验一次时间
3.页面倒计时完毕后,先与服务器校验是否倒计时完毕,完毕则调用回调函数,否则继续倒计时



倒计时js函数:
<pre name="code" class="js">
/**
* 倒计时函数
* @param ids 元素id
* @param ifinvest 回调函数
* */
function counts(ids,ifinvest){
var interval,a=0,time,startt,tenderid;
this.startcout=function(){
startt = document.getElementById(ids).getAttribute("date-start");
var nowtime = document.getElementById(ids).getAttribute("date-now");
tenderid = document.getElementById(ids).getAttribute("tender-id");
time = this.getSecond(startt,nowtime);
if (!interval)
            interval = setInterval(this.go, 1000);
}
this.go=function(){
a++;
--time;
var str="";
//--------------
d = Math.floor(time / 86400),  
h = Math.floor((time % 86400) / 3600),  
m = Math.floor(((time % 86400) % 3600) / 60),  
s = Math.floor(((time % 86400) % 3600) % 60);

if(a==300 || time &lt;= 0){//每300秒与服务器校验时间
a=0;
$.ajax({//与服务器校验时间
url : "web/getsysdatetime.do",
type : "post",
dataType : 'json',
success : function(data) {
var oStartDate = js_patch_getdate(startt+"");
var oNowDate = js_patch_getdate(data+"");
var startTime = oStartDate.getTime();
var nowTime = oNowDate.getTime();
time = (startTime-nowTime)&gt;0?(startTime-nowTime)/1000:0;
if(time&lt;=0){
clearInterval(interval);//清除倒计时
ifinvest.starts();//成功的回调函数
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
clearInterval(interval);//清除倒计时
}
});
}
if (time&gt;0){
str = "&lt;span class='day'&gt;"+js_patch_fillZero(d, 2)+"&lt;/span&gt;天&lt;span class='day'&gt;"+js_patch_fillZero(h, 2)+"&lt;/span&gt;时&lt;span class='day'&gt;"+js_patch_fillZero(m, 2)+"&lt;/span&gt;分&lt;span class='day'&gt;"+js_patch_fillZero(s, 2)+"&lt;/span&gt;秒";
}else{
str = "&lt;span class='day'&gt;00&lt;/span&gt;天&lt;span class='day'&gt;00&lt;/span&gt;时&lt;span class='day'&gt;00&lt;/span&gt;分&lt;span class='day'&gt;00&lt;/span&gt;秒";
}
document.getElementById(ids).innerHTML = str;
}
this.getSecond=function(startdate,nowdate) {
var oStartDate = js_patch_getdate(startdate+"");
var oNowDate = js_patch_getdate(nowdate+"");

var startTime = oStartDate.getTime();
var nowTime = oNowDate.getTime();

var second = (startTime-nowTime)&gt;0?(startTime-nowTime)/1000:0;
return second;
}
}

/**
* 将字符串格式的日期(如:20150415092645)转换成js Date对象
* 注意Date对象的初始化方式
* */
function js_patch_getdate(stime) {
var datetime = new Date(
parseFloat(stime.substr(0, 4)),
parseFloat(stime.substr(4, 2) - 1),
parseFloat(stime.substr(6, 2)),
parseFloat(stime.substr(8, 2)),
parseFloat(stime.substr(10, 2)),
parseFloat(stime.substr(12, 2)));
return datetime;
}
/**
* 格式化
* */
function js_patch_fillZero(num, digit) {
var str = '' + num;
while (str.length &lt; digit) {
str = '0' + str;
}
return str;
}
</pre>

HTML:
<pre name="code" class="html">
&lt;div id="timer0" tender-id="${tendermap.tender_id}" date-start="${tendermap.buy_start_time}" date-now="${starttime}"&gt;
&lt;span class="day"&gt;00&lt;/span&gt;天&lt;span class="day"&gt;00&lt;/span&gt;时&lt;span class="day"&gt;00&lt;/span&gt;分&lt;span class="day"&gt;00&lt;/span&gt;秒
&lt;/div&gt;
</pre>

调用:
<pre name="code" class="java">
//一般放到 $(document).ready(function() {});中
if(document.getElementById("timer0")!=null){
var ifstarts = new if_startinvest("timer0", document.getElementById("timer0").getAttribute("tender-id"));
var counts_1 = new counts("timer0",ifstarts);
counts_1.startcout();
}
</pre>
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics