关闭

JAVASCRIPT使用setTimeout实现时间倒计时

标签: javascriptinputbuttonfunctionhtml
1144人阅读 评论(0) 收藏 举报
分类:

语法:



以上引用的别的网站的。


前台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);//定时一秒执行一次
			}
		}




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


补充:





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:136799次
    • 积分:2018
    • 等级:
    • 排名:第19730名
    • 原创:60篇
    • 转载:24篇
    • 译文:0篇
    • 评论:40条
    最新评论