JAVASCRIPT使用setTimeout实现时间倒计时

原创 2012年03月21日 17:42:28

语法:



以上引用的别的网站的。


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




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


补充:





相关文章推荐

使用计时器实现倒计时(setTimeout())

DOM0级添加 h4{ height: 20px; width: 20px; border: 1px solid yellow; } 点击按钮背...

JavaScript倒计时setTimeout()和setInterval()

1、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法 setTimeout(code,millisec) 参数 描述 code 必需。要调用的函数后要执行的...

Javascript实现时间倒计时

这里使用的是Date日期类 日期类倒计时 window.onload=function(){...

倒计时的实现&&settimeout和setinterval的区别

当前系统时间   window.onload = function(){     showTime();   }   function checkTime(i){  //补位处理 ...

Javascript实现秒杀倒计时(时间与服务器时间同步)

转自:http://hi.baidu.com/flondon/item/04e89ece8f5ecf0d0ad93a98

Javascript实现商品秒杀倒计时(时间与服务器时间同步)

现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时。 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同、用户自行设置等问题)。 2.要...

JavaScript 时间倒计时

  • 2015年07月15日 17:56
  • 3KB
  • 下载

Android 多线程 和异步的实践:跳转,同步显示时间,倒计时的实现,知识点

Android 多线程 和异步的实践 模拟引导页,数秒后转向新的页面 从主mainactiyity 到newpager 写了两种启动模式 先写 布局 ...

js 实现时间倒计时和setInterval用法

JavaScript中的setInterval用法 JavaScript中的setInterval用法 setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。可以使...

web前端复习(二):js日期操作,实现时间显示和倒计时效果

虽然jquery框架的封装使得几行代码就可以完成js的复杂功能的实现,但是jquery并为日期定制操作,所以日期的操作还是得使用js原生实现下面我们就来简单实现js日期操作,代码如下:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JAVASCRIPT使用setTimeout实现时间倒计时
举报原因:
原因补充:

(最多只允许输入30个字)