页面代码
<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实现倒计时功能
原文地址:https://www.cnblogs.com/68xi/p/8546763.html