比较全的JavaScript倒计时脚本

时间长的倒计时、秒表
服务器君一共花费了702.964 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊、还有什么值得期待的事情,都可以用到倒计时。现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足大部分需求。

1. 比较长时间的倒计时

年还有:

<script type="text/javascript">   
startclock();
var timerID = null;   
var timerRunning = false;   
function showtime() {   
	Today = new Date();
	var year = Today.getFullYear();
	document.getElementById("next_yeat").innerHTML = year + 1;
	var NowHour = Today.getHours();   
	var NowMinute = Today.getMinutes();   
	var NowMonth = Today.getMonth();   
	var NowDate = Today.getDate();   
	var NowYear = Today.getYear();   
	var NowSecond = Today.getSeconds();   
	if (NowYear <2000)   
	NowYear=1900+NowYear;   
	Today = null;   
	Hourleft = 23 - NowHour   
	Minuteleft = 59 - NowMinute   
	Secondleft = 59 - NowSecond   
	Yearleft = year - NowYear   
	Monthleft = 12 - NowMonth - 1 
	Dateleft = 31 - NowDate   
	if (Secondleft<0)   
	{   
		Secondleft=60+Secondleft;   
		Minuteleft=Minuteleft-1;   
	}   
	if (Minuteleft<0)   
	{    
		Minuteleft=60+Minuteleft;   
		Hourleft=Hourleft-1;   
	}   
	if (Hourleft<0)   
	{   
		Hourleft=24+Hourleft;   
		Dateleft=Dateleft-1;   
	}   
	if (Dateleft<0)   
	{   
		Dateleft=31+Dateleft;   
		Monthleft=Monthleft-1;   
	}   
	if (Monthleft<0)   
	{   
		Monthleft=12+Monthleft;   
		Yearleft=Yearleft-1;   
	}   
	Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒';
	document.form1.left.value=Temp;   
	timerID = setTimeout("showtime()",1000);   
	timerRunning = true;   
}   
var timerID = null;   
var timerRunning = false;   
function stopclock () {   
	if(timerRunning)   
	clearTimeout(timerID);   
	timerRunning = false;   
}   
function startclock () {   
	stopclock();   
	showtime();   
}   
// -->   
</script>   

2. 小时倒计时(短时间倒计时)

<script type="text/javascript">   
<!--   
//一个小时,按秒计算,可以自己调整时间
var maxtime = 60*60 
function CountDown()
{   
	if(maxtime>=0)
	{   
		minutes = Math.floor(maxtime/60);   
		seconds = Math.floor(maxtime%60);   
		msg = "距离结束还有 "+minutes+" 分 "+seconds+" 秒";   
		document.all["timer"].innerHTML=msg;   
		if(maxtime == 5*60) alert('注意,还有5分钟!');   
		--maxtime;   
	}   
	else
	{   
		clearInterval(timer);   
		alert("时间到,结束!");   
	}   
}   
timer = setInterval("CountDown()",1000);   
//-->   
</script>

3. 最简倒计时

<script Language="JavaScript">    
<!-- Begin    
  var timedate= new Date("January 14,2012");    
  var times="2012";    
  var now = new Date();    
  var date = timedate.getTime() - now.getTime();    
  var time = Math.floor(date / (1000 * 60 * 60 * 24));    
  if (time >= 0) ;   
document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");   
// End -->   
</script>   

4. 秒表功能

00:01:11:00

<script type="text/javascript">   
var normalelapse = 100;   
var nextelapse = normalelapse;   
var counter;    
var startTime;   
var start = clock.innerText;    
var finish = "00:00:00:00";   
var timer = null;   
// 开始运行   
function run() {   
	startB.disabled = true;   
	endB.disabled = false;   
	counter = 0;   
	// 初始化开始时间   
	startTime = new Date().valueOf();   
	
	// nextelapse是定时时间, 初始时为100毫秒   
	// 注意setInterval函数: 时间逝去nextelapse(毫秒)后, onTimer才开始执行   
	timer = window.setInterval("onTimer()", nextelapse);    
}   
// 停止运行   
function stop() {   
	startB.disabled = false;   
	endB.disabled = true;   
	window.clearTimeout(timer);   
}   
window.onload = function() {   
	endB.disabled = true;   
}   
// 倒计时函数   
function onTimer()   
{   
	if (start == finish)   
	{   
		window.clearInterval(timer);   
		alert("time is up!");   
		return;   
	}   
	var hms = new String(start).split(":");   
	var ms = new Number(hms[3]);   
	var s = new Number(hms[2]);   
	var m = new Number(hms[1]);   
	var h = new Number(hms[0]);   
	ms -= 10;   
	if (ms < 0)   
	{   
		ms = 90;   
		s -= 1;   
		if (s < 0)   
		{   
			s = 59;   
			m -= 1;   
		}   
		if (m < 0)   
		{   
			m = 59;   
			h -= 1;   
		}   
	}   
	var ms = ms < 10 ? ("0" + ms) : ms;   
	var ss = s < 10 ? ("0" + s) : s;   
	var sm = m < 10 ? ("0" + m) : m;   
	var sh = h < 10 ? ("0" + h) : h;   
	start = sh + ":" + sm + ":" + ss + ":" + ms;   
	clock.innerText = start;   

	// 清除上一次的定时器   
	window.clearInterval(timer);   
	// 自校验系统时间得到时间差, 并由此得到下次所启动的新定时器的时间nextelapse   
	counter++;    
	var counterSecs = counter * 100;   
	var elapseSecs = new Date().valueOf() - startTime;   
	var diffSecs = counterSecs - elapseSecs;   
	nextelapse = normalelapse + diffSecs;   
	diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs;   
	next.value = "nextelapse = " + nextelapse;   
	if (nextelapse < 0) nextelapse = 0;   
	// 启动新的定时器   
	timer = window.setInterval("onTimer()", nextelapse);    
}   
</script>

本文地址:http://www.nowamagic.net/librarys/veda/detail/421,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/421

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《程序员修炼之道:从小工到专家》 亨特(Andrew Hunt) (作者), 托马斯(David Thomas) (作者), 马维达 (译者)

《程序员修炼之道:从小工到专家》内容简介:《程序员修炼之道》由一系列独立的部分组成,涵盖的主题从个人责任、职业发展,知道用于使代码保持灵活、并且易于改编和复用的各种架构技术,利用许多富有娱乐性的奇闻轶事、有思想性的例子及有趣的类比,全面阐释了软件开发的许多不同方面的最佳实践和重大陷阱。无论你是初学者,是有经验的程序员,还是软件项目经理,《程序员修炼之道:从小工到专家》都适合你阅读。

更多计算机宝库...