简化之前的计时函数，完善了倒计时功能

最新推荐文章于 2025-08-20 09:19:17 发布

原创最新推荐文章于 2025-08-20 09:19:17 发布 · 104 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML、CSS和JavaScript实现的倒计时页面，通过选择特定日期和时间，页面将显示到该时间点的倒计时，包括年、月、日、时、分、秒。

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
	<title>倒计时</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#tele {
		margin: 200px auto;
		width: 500px;
		height: 180px;
		background-color: #c40000;
		text-align: center;
		font-size: 30px;
		box-sizing: border-box;
		display: -webkit-box;
	  -webkit-box-pack: center;
	  -webkit-box-align: center;
	}
	input{
		width: 30px;
	}
	</style>
</head>
<body onload="init(1,13,'month');init(1995,2019,'year');init(1,32,'day');">
	<div >
		<select id="year">
			<option>年</option>
		</select>年
		<select id="month">
			<option>月</option>
		</select>月
		<select id="day">
			<option>日</option>
		</select>日
		<input type="text" name="" id="hours" placeholder="时">:
		<input type="text" name="" id="minutes" placeholder="分">:
		<input type="text" name="" id="seconds" placeholder="秒">
		<input type="button" name="" id="length" value="时间间隔" style="width: 60px" onclick="time();">
	</div>
	<div id="tele"></div>
<script type="text/javascript">
	//初始化函数
	function init(a,b,c){
		var nothing = "";
		for(var i = a; i < b; i++){
			nothing = nothing +"<option value = '"+i+"' id = attr'"+"''"+i+"'>"+i+"</option>";
		}
	 	document.getElementById(c).innerHTML = nothing;
 	}
	var old = new Date();
	//赋值函数
	function time(){
		last = old.setFullYear($("#year").val(),($("#month").val()-1),$("#day").val());
		laster = old.setHours($("#hours").val(),$("#minutes").val(),$("#seconds").val());
		setInterval(edge,1000);
	}
	//计时函数
	function edge(){
		var now = new Date();
		var lasttime = Math.abs(now.getTime() - old.getTime());
			var year = parseInt(lasttime / 1000 / 60 / 60 / 24 / 30 / 12);
			var month = parseInt(lasttime / 1000 / 60 / 60 / 24 / 30 % 12);
			var day = parseInt(lasttime / 1000 / 60 / 60 / 24 % 30);
			var hours = parseInt(lasttime / 1000 / 60 / 60 % 24);
			var minutes = parseInt(lasttime / 1000 / 60 % 60);
			var lastseconds = parseInt(lasttime / 1000 % 60);
			document.getElementById('tele').innerHTML = year + "年" + month + "个月" + "" + day+ "天" + "" + hours+ "时" + ":" + minutes+ "分" + ":" + lastseconds + "秒";
	}
	//样式修改函数
	function change(i){
		if (i < 10) {
			i = "0" + i;
		}
		return i;
	}
</script>
</body>
</html>