destoon開發筆記-JQ+JS實現倒計時功能
阿新 • • 發佈:2018-03-12
需要 int 服務器時間 pos bsp 同步時間 icon time() start
頁面代碼
<div class="time " class="" id="onBidtime125" pid="125"> <div class="timeicon" ></div> 距離結束:<span class="day">-</span> 天 <span class="hour">-</span> 小時 <span class="minute">-</span> 分 <span class="second">-</span> 秒 <script type="text/javascript"> $(function(){ endDown2("1472287680","1470660651","#onBidtime125","#onBidtime125 .day","#onBidtime125 .hour","#onBidtime125 .minute","#onBidtime125 .second"); }); </script> </div>
JS代碼
/ 結束倒計時 //etime 結束時間 //ntime 服務器時間 function endDown2(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem) var now_time = new Date(ntime*1000); var end_time = new Date(etime*1000); var sys_second = (end_time-now_time)/1000; var timer = setInterval(function(){ if (sys_second > 0) { sys_second -= 1; var day = Math.floor((sys_second / 3600) / 24); var hour = Math.floor((sys_second / 3600) % 24); var minute = Math.floor((sys_second / 60) % 60); var second = Math.floor(sys_second % 60); day_elem && $(day_elem).text(day);//計算天 $(hour_elem).text(hour<10?"0"+hour:hour);//計算小時 $(minute_elem).text(minute<10?"0"+minute:minute);//計算分 $(second_elem).text(second<10?"0"+second:second);// 計算秒 } else { clearInterval(timer); $(‘#bidTimeStatus‘).remove(); $(boxobj).html(‘‘); $(boxobj).addClass(‘end‘); } }, 1000); } // 開始倒計時 function startDown2(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem){ var now_time = new Date(ntime*1000); var end_time = new Date(etime*1000); var sys_second = (end_time-now_time)/1000; var timer = setInterval(function(){ if (sys_second > 0) { sys_second -= 1; var day = Math.floor((sys_second / 3600) / 24); var hour = Math.floor((sys_second / 3600) % 24); var minute = Math.floor((sys_second / 60) % 60); var second = Math.floor(sys_second % 60); day_elem && $(day_elem).text(day);//計算天 $(hour_elem).text(hour<10?"0"+hour:hour);//計算小時 $(minute_elem).text(minute<10?"0"+minute:minute);//計算分 $(second_elem).text(second<10?"0"+second:second);// 計算秒 } else { $(‘.noStartBidTbox .th‘).html(‘拍賣已開始‘); $(boxobj).html(‘‘); $(boxobj).addClass(‘into‘); } }, 1000); }
需要時時與服務器同步時間JS代碼
function endDown(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem){ var now_time = new Date(ntime*1000); var end_time = new Date(etime*1000); var native_time = new Date().getTime(); //本地時間 var now_cha = now_time - native_time; //服務器和本地時間差 var native_end_time = end_time - now_cha; //本地結束時間 var sys_second = 0; var bidpids = $(boxobj).attr(‘pid‘); if(bidpids){ var bidpid = bidpids; } endDowntimer = setInterval(function(){ // 檢查本地時間是否更改 if(Math.abs(native_time - new Date().getTime())>1000){ clearInterval(endDowntimer); $.post(ajaxGetTime, {‘pid‘:bidpid},function(data){ endDown(data.endtime,data.nowtime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem); }); } sys_second = (native_end_time - new Date().getTime())/100; //本地結束剩余時間 if (sys_second > 0) { sys_second -= 1; var day = Math.floor((sys_second / 36000) / 24); var hour = Math.floor((sys_second / 36000) % 24); var minute = Math.floor((sys_second / 600) % 60); var second = Math.floor((sys_second/10) % 60); var msec = Math.floor(sys_second % 10); //毫秒 day_elem && $(day_elem).text(day);//計算天 $(hour_elem).text(hour<10?"0"+hour:hour);//計算小時 $(minute_elem).text(minute<10?"0"+minute:minute);//計算分 $(second_elem).text(second<10?"0"+second:second);// 計算秒 $(msec_elem).text(msec);// 計算秒的1/10 native_time = new Date().getTime(); } else { clearInterval(endDowntimer); // 本地時間結束提交服務器驗證是否結束 $.post(ajaxCheckSucc, {‘pid‘:bidpid},function(data){ if(data.status==0){ // startDown(data.end_time,data.now_time,".noStartTime",".noStartTime .day",".noStartTime .hour",".noStartTime .minute",".noStartTime .second",".noStartTime .msec"); endDown(data.end_time,data.now_time,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem); }else{ if(data.status==1){ $(‘#bidTimeStatus‘).remove(); $(boxobj).html(‘‘); $(boxobj).addClass(‘end‘); var user = data.nickname; if(data.uid==userid){user =‘您‘;} var msg = ‘恭喜‘+user+‘以‘+data.money+‘元,拍到《‘+data.pname+‘》‘; }else if (data.status==2){ var msg = ‘《‘+data.pname+‘》未達到保留價,流拍!‘ } popup.success(msg,‘結束提示‘,function(action){ //success 返回兩個 action 值,分別是 ‘ok‘ 和 ‘close‘。 if(action == ‘ok‘){ window.top.location.reload(); } if(action == ‘close‘){ window.top.location.reload(); } }); } }); } }, 100); } // 開始時間倒計時 function startDown(etime,ntime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem){ var now_time = new Date(ntime*1000); var end_time = new Date(etime*1000); var native_time = new Date().getTime(); //本地時間 var now_cha = now_time - native_time; //服務器和本地時間差 var native_end_time = end_time - now_cha; //本地結束時間 var sys_second = 0; var bidpids = $(boxobj).attr(‘pid‘); if(bidpids){ var bidpid = bidpids; } startDowntimer = setInterval(function(){ if(Math.abs(native_time - new Date().getTime())>1000){ clearInterval(startDowntimer); $.post(ajaxGetTime, {‘pid‘:bidpid},function(data){ startDown(data.endtime,data.nowtime,boxobj,day_elem,hour_elem,minute_elem,second_elem,msec_elem); }); } sys_second = (native_end_time - new Date().getTime())/100; //本地結束剩余時間 if (sys_second > 0) { sys_second -= 1; var day = Math.floor((sys_second / 36000) / 24); var hour = Math.floor((sys_second / 36000) % 24); var minute = Math.floor((sys_second / 600) % 60); var second = Math.floor((sys_second/10) % 60); var msec = Math.floor(sys_second % 10); //毫秒 day_elem && $(day_elem).text(day);//計算天 $(hour_elem).text(hour<10?"0"+hour:hour);//計算小時 $(minute_elem).text(minute<10?"0"+minute:minute);//計算分 $(second_elem).text(second<10?"0"+second:second);// 計算秒 $(msec_elem).text(msec);// 計算秒的1/10 native_time = new Date().getTime(); } else { $(‘.noStartBidTbox .th‘).html(‘拍賣已開始‘); $(boxobj).html(‘‘); $(boxobj).addClass(‘into‘); window.top.location.reload(); } }, 100); }
destoon開發筆記-JQ+JS實現倒計時功能