JS倒计时实现-CSDN博客

本文链接：https://blog.csdn.net/dream_hai/article/details/52518597
js计时器
html+css+javascript+php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js倒计时</title>
</head>
<script>
var ti;
function get_time(){
	var year = document.getElementById('year').value;
	var month = document.getElementById('month').value;
	var day = document.getElementById('day').value;
	var hour = document.getElementById('hour').value;
	var minute = document.getElementById('minute').value;
	var second = document.getElementById('second').value;
	var min_second = document.getElementById('min_second').value;
	var myDate = new Date(year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second+':'+min_second);
	timer(myDate);
}
function timer(choose){
	clearInterval(ti);
	 ti = setInterval(function (){
		var now_time = new Date();
		var now_str = "";
		now_str = "当前时间："+now_time.getFullYear()+"年"+(now_time.getMonth()+1)+"月"+ now_time.getDate()+"日"+ now_time.getHours()+"时"+now_time.getMinutes()+"分"+now_time.getSeconds()+"秒"+now_time.getMilliseconds()+"毫秒";
		document.getElementById('now_time').innerHTML = now_str;
		var now_second = now_time;
		if(choose < now_second){
			var cha = now_second-choose;
			document.getElementById('show').innerHTML = "已经过去"+get_de(cha);;
		}else{
			var cha = -(now_second-choose);
			document.getElementById('show').innerHTML = "还剩"+get_de(cha);
		}
	},1);
}
function get_de(time){
	var day = parseInt(time/(24*60*60*1000));
	var hour = parseInt(time%(24*60*60*1000)/(60*60*1000));
	var minute = parseInt(time%(60*60*1000)/(60*1000));
	var second = parseInt(time%(60*1000)/(1000));
	var min_second = parseInt(time%(1000));
	return "<br/>"+day+'天'+hour+"小时"+minute+"分钟"+"<br/>"+second+"秒"+min_second+"毫秒";
}
function change_year(){
	if(isLeapYear(document.getElementById('year').value)){
		if(document.getElementById('month').value == 2){
			var str = option_str(29);
			document.getElementById('day').innerHTML = str;
		}
	}else{
		if(document.getElementById('month').value == 2){
			//console.log("jianyihdsk");
			var str = option_str(28);
			document.getElementById('day').innerHTML = str;
		}
	}
}
function change_month(month){
	var leap = [1,3,5,7,8,10,12];
	var temp = 0;
	for(var i = 0; i < leap.length; i++){
		if(leap[i] == month){
			temp = 1;
			break;
		}
	}
	if(temp){
		var str = option_str(31);
		document.getElementById('day').innerHTML = str;
	}else if(month == 2){
		change_year();
	}else{
		var str = option_str(30);
		document.getElementById('day').innerHTML = str;
	}
}
function option_str(ti){
	var temp = '';
	for(var i = 1;i <= ti;i++){
		temp += "<option value='"+i+"'>"+i+"</option>"
	}
	return temp;
}
function isLeapYear(year) { 
 return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);  
}
</script>
<style>
.tim{
	width:60px;
	height:30px;
}
#now_time{
	width:650px;
	margin:0 auto;
	font-size:30px;
	color:blue;
	
}
#show{
	width:700px;
	font-size:50px;
	color:red;
	text-align:center;
	margin:50px auto;
	font-weigth:900;
}
#set{
	position:fixed;
	background:rgba(50,250,25,0.5);
	padding:10px;
	border-radius:10px;
}
select{
	border-radius:10px;
}
</style>
<body onload = "get_time()">
<div id="now_time">还剩xx年xx月xx天xx小时xx分xx秒
</div>
<div id="set">
<select class="tim" id='year' οnchange="change_year();get_time()">
	<?php 
		for($i = 1900; $i<2100; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select> 年<br/><br/>
<select class="tim" id='month' οnchange="change_month(this.value);get_time()">
	<?php 
		for($i = 1; $i<13; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select> 月<br/><br/>
<select class="tim" id='day' οnchange="get_time()">
	<?php 
		for($i = 1; $i<32; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select> 日<br/><br/>
<select class="tim" id='hour' οnchange="get_time()">
	<?php 
		for($i = 0; $i<24; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select> 点<br/><br/>
<select class="tim" id='minute' οnchange="get_time()">
		<?php 
		for($i = 0; $i<60; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select> 分<br/><br/>
<select class="tim" id='second' οnchange="get_time()">
		<?php 
		for($i = 0; $i<60; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select> 秒<br/><br/>
<select class="tim" id='min_second' οnchange="get_time()">
		<?php 
		for($i = 0; $i<1000; $i++){
			echo "<option value='".$i."'>".$i."</option>";
		}
	?>
</select>毫秒
</div>
<div id="show"></div>
<body>
</body>
</html>