浏览 3209 次
锁定老帖子 主题:一个页面多个倒计时js代码
精华帖 (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 <= 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; } </pre> HTML: <pre name="code" class="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> </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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |