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

[size=medium]粗略的整理下[/size]

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


倒计时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 <= 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)>0?(startTime-nowTime)/1000:0;
if(time<=0){
clearInterval(interval);//清除倒计时
ifinvest.starts();//成功的回调函数
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
clearInterval(interval);//清除倒计时
}
});
}
if (time>0){
str = "<span class='day'>"+js_patch_fillZero(d, 2)+"</span>天<span class='day'>"+js_patch_fillZero(h, 2)+"</span>时<span class='day'>"+js_patch_fillZero(m, 2)+"</span>分<span class='day'>"+js_patch_fillZero(s, 2)+"</span>秒";
}else{
str = "<span class='day'>00</span>天<span class='day'>00</span>时<span class='day'>00</span>分<span class='day'>00</span>秒";
}
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)>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 < digit) {
str = '0' + str;
}
return str;
}


HTML:

<div id="timer0" tender-id="${tendermap.tender_id}" date-start="${tendermap.buy_start_time}" date-now="${starttime}">
<span class="day">00</span>天<span class="day">00</span>时<span class="day">00</span>分<span class="day">00</span>秒
</div>


调用:

//一般放到 $(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();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值