js 倒计时

写着玩的,所以获取的时间是本地时间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	p { margin:0; height:24px; line-height:24px; background:#EBEBEB; margin-top:5px; color:red;}
</style>
</head>
<body>
<fieldset>
<legend>倒计时1</legend>
	<input name="" type="text" size="4" /> 年
    <input name="" type="text" size="2" /> 月
    <input name="" type="text" size="2" /> 日
    <input name="" type="text" size="2" /> 时
    <input name="" type="text" size="2" /> 分
    <input name="" type="text" size="2" /> 秒
  	<input name="" type="button" value="开始倒计时" />
    <p></p>
</fieldset>
<fieldset>
<legend>倒计时2</legend>
	<input name="" type="text" size="4" /> 年
    <input name="" type="text" size="2" /> 月
    <input name="" type="text" size="2" /> 日
    <input name="" type="text" size="2" /> 时
    <input name="" type="text" size="2" /> 分
    <input name="" type="text" size="2" /> 秒
  	<input name="" type="button" value="开始倒计时" />
    <p></p>
</fieldset>
<fieldset>
<legend>倒计时3</legend>
	<input name="" type="text" size="4" /> 年
    <input name="" type="text" size="2" /> 月
    <input name="" type="text" size="2" /> 日
    <input name="" type="text" size="2" /> 时
    <input name="" type="text" size="2" /> 分
    <input name="" type="text" size="2" /> 秒
  	<input name="" type="button" value="开始倒计时" />
    <p></p>
</fieldset>
<fieldset>
<legend>倒计时4</legend>
	<input name="" type="text" size="4" /> 年
    <input name="" type="text" size="2" /> 月
    <input name="" type="text" size="2" /> 日
    <input name="" type="text" size="2" /> 时
    <input name="" type="text" size="2" /> 分
    <input name="" type="text" size="2" /> 秒
  	<input name="" type="button" value="开始倒计时" />
    <p></p>
</fieldset>
</body>
</html>
function daojishi(){this.init.apply(this,arguments)}
daojishi.prototype = {
	init:function(year,month,date,hour,minutes,seconds,box){
		var Endtime =  month + '/' + date + '/' + year +' '+ hour +':'+ minutes + ':' + seconds ;
		var reg = /\d{1,2}\/\d{1,2}\/\d{4}\s\d{1,2}\:\d{1,2}\:\d{1,2}/;
		if(!reg.test(Endtime)){
			box.innerHTML = '时间格式不对,请重新输入,格式应该为:MM/DD/YY HH/MM/SS 例如:02/14/2011 12:00:00'
			return;
		}
		if(/^0\d{3}/.test(year) ||month > 12 || date > 31 || hour > 24 || minutes > 60 || seconds > 60){
			box.innerHTML = '你输的神马乱七八糟的时间嘛,再输一次!'
			return;
		}
		var nowTime = Number(new Date());
		var endTime = Number(new Date(Endtime));
		this.timer = setInterval(this.timechange(nowTime,endTime,box),1000)
	},
	timechange:function(nowTime,endTime,box){
		var days,hours,minutes,seconds,cMinutes,cSeconds;
		var _this = this;
		return function(){
			if(endTime < nowTime){
				box.innerHTML = "00 小时," + "00 分钟,"+ "00 秒";
				clearInterval(_this.timer);
				return;
			}
			nowTime+=1000;
			seconds = Math.floor((endTime - nowTime) / 1000);
			minutes = Math.floor(seconds/60);
			hours = Math.floor(minutes/60);
			cMinutes = minutes % 60;
			cSeconds = seconds % 60;
			box.innerHTML = hours + "小时," + cMinutes + "分钟," + cSeconds + "秒";
		}
	}
}
window.onload = function(){
	var fieldset = document.getElementsByTagName('fieldset');
	for(var i=0,len=fieldset.length; i<len;i++){
		(function(i){
			var inputs = fieldset[i].getElementsByTagName('input')
			var msgbox = fieldset[i].getElementsByTagName('p')[0];
			inputs[6].onclick = function(){
				var year = inputs[0].value;
				var month = inputs[1].value;
				var date = inputs[2].value;
				var hour = inputs[3].value;
				var minutes = inputs[4].value;
				var seconds = inputs[5].value;
				new daojishi(year,month,date,hour,minutes,seconds,msgbox);
			}
		})(i);
	}
}
posted @ 2011-02-14 17:16  zjhsd2007  阅读(263)  评论(0编辑  收藏  举报