JAVASCRIPT使用setTimeout实现时间倒计时

来源:互联网 发布:前程无忧常州数控编程 编辑:程序博客网 时间:2024/06/05 03:47

语法:



以上引用的别的网站的。


前台HTML

设置剩余时间:<input id="min" />分钟    <input type="button" value="开始" onclick="timeless();"/>  <h4 id="timeless">剩余时间:45分钟</h4>

界面:



JavaScript代码:

var min;//计分var seconds;//计秒function timeless(){var minEl = document.getElementById("min");var minVal = minEl.value;min = minVal;seconds = min*60;setTimeout("setTimeLess()",1000);}/**定时函数*/function setTimeLess(){//秒,小时,天var sec = 0,hour = 0,day = 0;var innerText = "";//显示文本seconds=seconds-1;min = Math.floor(seconds/60);//计算分sec = seconds % 60;//计算秒if(min >= 60){//计算小时hour = Math.floor(min /60);min = min % 60;//重新计算分}if(hour >= 24){//计算天day = Math.floor(hour /24);hour = hour % 24;//重新计算小时}if(hour > 0){innerText = hour+"小时"+innerText;}if(day > 0){innerText = day+"天"+innerText;}//如果秒还有值,则继续执行if(seconds>=0){document.getElementById("timeless").innerHTML="剩余时间:"+innerText+min+"分钟"+sec+"秒";setTimeout("setTimeLess()",1000);//定时一秒执行一次}}




以上代码比较简单,就不解释了。


补充:





原创粉丝点击