JavaScript日期倒计时实例源码

2015-3-27 23:29| 发布者: CODETC| 查看: 3455| 评论: 0

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.getElementById("slong").innerHTML = 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 1,2020");    
  var times="2020";    
  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:15: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>
文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-165-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部