js倒计时效果代码(可以自定义计算)

作者：简简单单 2013-06-21

提示：您可以先修改部分代码再运行

<!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=gb2312" />
<title>另外的一种可以计算的倒计时效果</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body{font-size:12px;}
#years{ font-size:12px;}
select{font-size:12px;}
#days{font-size:12px; }
label{margin:0 4px;}
#divYear{ padding:5px; border:1px solid #999; -moz-border-radius:5px; -moz-box-shadow:2px 2px 1px #ccc; word-wrap:break-word;}
#divYear a{cursor:pointer;padding:1px 4px;}
#divYear a:hover{background:#ccc; color:#fff;}
</style>
<script type="text/javascript">
	function addLoadEvent(func){
		var oldonload = window.onload;
		if (typeof window.onload != "function") {
			window.onload = func;
		}
		else {
			window.onload = function(){
				oldonload();
				func();
			}
		}
	}
	
	function startTime()  
	{  
	 var weekday = new Array(7); 
	  weekday[0] = "星期日"  
	  weekday[1] = "星期一"  
	  weekday[2] = "星期二"  
	  weekday[3] = "星期三"  
	  weekday[4] = "星期四"  
	  weekday[5] = "星期五"  
	  weekday[6] = "星期六"  
	  
	var today=new Date()  
	var year=today.getFullYear()  
	var month=today.getMonth()+1  
	var day=today.getDate()  
	var week= weekday[today.getDay()]  
	var h=today.getHours()  
	var m=today.getMinutes()  
	var s=today.getSeconds()   
	month=checkTime(month)  
	day=checkTime(day)  
	h=checkTime(h)  
	m=checkTime(m)  
	s=checkTime(s)  
	document.getElementById('today').innerHTML="今天是"+year+"年"+month+"月"+day+"日 "+week+" "+h+":"+m+":"+s  
	t=setTimeout('startTime()',500)  
	}  
	
	keyYear = ""
	keyNumMonth = ""
	keyDay = ""
	function fDate(){
		keyYear = document.getElementById("years").value;
		keyMonth = document.getElementById("months").value;
		keyNumMonth = document.getElementById("months").selectedIndex;
		keyDay = document.getElementById("days").value;
		keyTime = keyMonth + " " + keyDay + "," + keyYear;
		countDown(keyTime);
		setTimeout("fDate()",500)
		
	}
		
	function countDown(j){
		var nowDate = new Date();//实例化 
		var nowTime = nowDate.getTime();//获得当前日期的毫秒数
		var newTime = Date.parse(j);//获得目标日期的毫秒数
		var eTime =  parseInt((Math.abs(newTime-nowTime))/1000) //得到秒数
		
		var eS = eTime%60;//取余得到秒
		var eM = parseInt(eTime/60)
		var eMM = eM%60;//取余得到分钟，以后的方法就一样了
		var eH = parseInt(eM/60); 
		var eD = parseInt(eH/24);
		var eH = eH%24;
		eS = checkTime(eS);
		eMM = checkTime(eMM);
		document.getElementById("txt").innerHTML="距离"+keyYear+"年"+keyNumMonth+"月"+keyDay+"日 还有"+eD+"天"+eH+"小时"+eMM+"分"+eS+"秒"
	}
	
	function checkTime(i)  
	{  
	if (i<10)   
	  {i="0" + i}  
	  return i  
	}
	addLoadEvent(startTime);
</script>
</head>
<body>
	<div id="today"></div>
	<form>
	<h3>请输入要计算的日期</h3>
	<p><input type="text" value="" id="years" /><label>年</label><select id="months"><option>--</option><option value="jan" class="1">1</option><option value="feb">2</option><option value="mar">3</option><option value="apr">4</option><option value="may">5</option><option value="jun">6</option><option value="jul">7</option><option value="aug">8</option><option value="sep">9</option><option value="oct">10</option><option value="nov">11</option><option value="dec">12</option></select><label>月</label><input type="text" value="" id="days" /><label>日</label></p>
	<p><input type="button" value="计算" onclick="fDate()" /></p>
   	</form>
	<p id="txt" style="color:#f00"></p>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

js倒计时效果代码(可以自定义计算)

相关文章

精彩推荐