新加入一个项目的集中开发,遇到一个需要倒计时的需求,经过测试,有以下几种方案,分享出来:
方案一:
页面Html:
JavaScript代码:<span style="font-size:18px;"><html> <head> <meta charset="utf-8"> </head> <body οnlοad="timeCounter('timeCounter')"> <p id="timeCounter">2:00:00</p> </body> </html></span>
<span style="font-size:18px;"><script> var timeCounter = (function () { var int; var timeID = SumTime().split(":"); var total =parseInt(timeID[0] * 3600) + parseInt(timeID[1] * 60) + parseInt(timeID[2]);//将时间换算成秒数 return function (elemID) { obj = document.getElementById(elemID); var s = (total % 60) < 10 ? ('0' + total % 60) : total % 60;//秒 var h = total / 3600 < 10 ? ('0' + parseInt(total / 3600)) : parseInt(total / 3600);//时 var m = (total - h * 3600) / 60 < 10 ? ('0' + parseInt((total - h * 3600) / 60)) : parseInt((total - h * 3600) / 60);//分 obj.innerHTML = h + ' : ' + m + ' : ' + s; total--; int = setTimeout("timeCounter('" + elemID + "')", 1000); if (total < 0) clearTimeout(int); } })() function SumTime() { var ap = new Date().toLocaleTimeString().substring(0, 2); var startTime = new Date().toLocaleTimeString().substring(2); var endTime = "15:00:00"; var start = new Array; var end = new Array; start = startTime.split(":"); end = endTime.split(":"); var hh = end[0] - start[0]; if (ap == "下午" || ap=="PM") { hh -= 12;} if (end[1] < start[1]) { hh -= 1; var mm = end[1] + 60 - start[1]; } else { var mm = end[1] - start[1]; } if (end[2] < start[2]) { mm -= 1; var ss = end[2] + 60 - start[2]; } else { var ss = end[2] - start[2]; } var diffTime = hh + ":" + mm + ":" + ss; return diffTime; } </script></span>
方案二:
js:<span style="font-size:18px;"><meta charset="utf-8"> <div> <span id='daya'></span>天 <span id='hoursa'></span>小时 <span id='minua'></span>分 <span id='secoa'></span>秒 </div></span>
<span style="font-size:18px;"><script type="text/javascript"> var a=7200; //以毫秒为单位 function fomtime() { a=a-1000; var b=new Date(); b.setTime(0); var c=new Date(); c.setTime(a); var day1=b.getDate(); //为方便调用,把天数、小时等单独定义 var hours1=b.getHours(); var minu1=b.getMinutes(); var seco1=b.getSeconds(); var day2=c.getDate(); var hours2=c.getHours(); var minu2=c.getMinutes(); var seco2=c.getSeconds(); var day=day2-day1; var hours=hours2-hours1; var minu=minu2-minu1; var seco=seco2-seco1; document.getElementById('daya').innerHTML=day; document.getElementById('hoursa').innerHTML=hours; document.getElementById('minua').innerHTML=minu; document.getElementById('secoa').innerHTML=seco; setTimeout("fomtime()",1000); } fomtime(); </script></span>
方案三:
<span style="font-size:18px;"><script> var second = 7200; // 剩余秒数 // 写一个方法,将秒数专为天数 var toDays = function(){ var s = second % 60; // 秒 var mi = (second - s) / 60 % 60; // 分钟 var h = ((second - s) / 60 - mi ) / 60 % 24; // 小时 var d = (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天 return d + "天" + h + "小时" + mi + "分钟" + s + "秒"; } //定时器 window.setInterval(function(){ second --; document.getElementById("showTimes").innerHTML = toDays (); }, 1000); </script> <p id="<span style="font-family: Arial, Helvetica, sans-serif;">timeCounter</span>"></p></span>
总结:
总结一下上面的集中方法,其实就是一种方法:将时间差转化为以秒为单位的数,然后写定时器美妙执行一次时间变化,只是这个变化的方式稍有不同,但是都离不开SetTimeout延时这个方法,另一个就是window的setInterval设置时间间隔,思想是一样的。
javascript 时间倒计时
最新推荐文章于 2023-05-31 18:30:08 发布