Blogger Information
Blog 40
fans 2
comment 1
visits 38814
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
14.jQuery倒计时实现-2019年01月21号
万物皆对象
Original
1748 people have browsed it

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>1.倒计时</title>
	<style>
		#times{
			width: 300px;height: 200px;
			background: lightblue;
			margin: 0 auto;
			text-align: center;
			line-height: 200px;
			border: 4px solid lightgreen;
			border-radius: 10px;
		}
		#key{
			width: 300px;height: 230px;
			border-bottom: 120px solid lightblue;
			border-left:50px solid transparent;
			border-right:50px solid transparent;
			margin: 0 auto;
			margin-top: -230px;
		}
	</style>
	<!-- 引入在线jQ -->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script>
		var now = new Date(); // 获取当前的时间
		var end = new Date(2019,1,5,00,00,00); 	  // 设置结束的时间(年,月,日,时,分,秒) 
		var res = Math.floor((end - now ) /1000); // 将两个时间相减,得到毫秒 然后/1000变成秒
		var go  = setInterval(run,1000); // 设置定时器调用对象
		console.log(go);
		function run(){
			if(res > 1){
				res = res -1; // 每秒减1
				var second = Math.floor(res % 60);   		// 计算秒,取余
				var minite = Math.floor((res / 60) % 60); 	// 计算分 换算多少分,取余
				var hour   = Math.floor((res / 3600) % 24);	// 计算时 换算多少时,取余 24小时制
				var day    = Math.floor(res / (3600*24)); 	// 计算天 换算多少天
				$('#times').html('<b>'+'距离春节还剩:' + day + '天' + hour + '小时' + minite + '分' + second + '秒'+'</b>');
				console.log('距离春节还剩:' + day + '天' + hour + '小时' + minite + '分' + second + '秒');
			}else{
				alert('倒计时结束');
				return false;
			}
		}
	</script>
</head>
<body>
	<div id="times"></div>
	<div id="key"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

666.jpg

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post