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




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


补充:





setInterval(倒计时实例)和setTimeout的用法

实例: html页面
  • snn1410
  • snn1410
  • 2014年09月25日 10:39
  • 8612

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

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

javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景

JavaScript是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行...
  • aitangyong
  • aitangyong
  • 2015年07月08日 10:53
  • 5068

【js】关于 setTimeout(0)所引发的……

在看vue的时候,看到了vue关于异步更新的原理,里面提到了setTimeout(0)。于是我想起来之前面试的时候被问过这个问题,并且在很久之后我随便查了查敷衍了事= =,到底是敷衍谁。于是昨天又去g...
  • natsuyu
  • natsuyu
  • 2016年07月14日 20:07
  • 839

自行整理了一个较为准确的倒计时功能代码(js实现)

在做这个之前,网上查找了很多的倒计时代码,但是都非常的不精确,对于精确度不高的一些倒计时上边还都可以,但是如果精确度一上去,立马就是会出bug,自己外加查阅资料在联合实际写了一个倒计时代码,这套代码有...
  • u010447573
  • u010447573
  • 2015年08月04日 18:40
  • 1493

setTimeout运行机制

我们先看一段代码setTimeout( function(){ alert(’你好!’); } , 0); setInterval( callbackFunction , 100); 认为setTi...
  • qingwenxiutong
  • qingwenxiutong
  • 2016年09月01日 11:25
  • 963

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

DOM0级添加 h4{ height: 20px; width: 20px; border: 1px solid yellow; } 点击按钮背...
  • qq_35655129
  • qq_35655129
  • 2016年08月01日 23:14
  • 156

Javascript实现时间倒计时

这里使用的是Date日期类 日期类倒计时 window.onload=function(){...
  • m0_37460263
  • m0_37460263
  • 2017年07月14日 20:10
  • 231

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

转自:http://hi.baidu.com/flondon/item/04e89ece8f5ecf0d0ad93a98
  • chelen_jak
  • chelen_jak
  • 2014年06月27日 22:02
  • 11647

js性能与setTimeout 的问题

有时候我们开发复杂交互的web产品时, 会考虑到流畅性而使用setTimeout 让某个操作在进程为空(或者说CPU比较空闲)的时候才去执行, 可以一定程度上提高流畅性, 但是同时 又听说setTim...
  • gladmustang
  • gladmustang
  • 2014年10月10日 20:41
  • 1671
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JAVASCRIPT使用setTimeout实现时间倒计时
举报原因:
原因补充:

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