Blogger Information
Blog 38
fans 0
comment 1
visits 36118
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery小案例:清明倒计时
夜澜风的博客
Original
591 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
		div{

			width: 1000px;
			height: 100px;
			background: #82d743;
			margin: 100px auto;
			text-align: center;
			font-size: 40px;
			line-height: 100px;
			color: #fff;
		}
		
	</style>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>
	<div>
		<p>2019年清明节倒计时 :<span> </span></p>
	</div>
	<script type="text/javascript">
	$(function(){
		function Ro(){
			//parse()方法可解析一个日期时间字符串,并返回1970/1/1
			var d=Date.parse('Apr 05 ,2019') //返回一个1970/1/1 午夜距离该日期时间的毫秒数
			var date=new Date()//获得当前时间
            var dd=date.getTime()//getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数
            // 1秒等于1000毫秒,1分钟等于60秒,一小时=60分钟等于3600秒,一天24小时=86400秒
            var rd=Math.floor((d-dd)/1000)//得到总的秒数;
            var days=Math.floor(rd/86400)//得到天数
            var hours=Math.floor(rd%86400/3600)//取余以后就是不到一天的秒数, 再除以3600就是小时数
            // console.log(hours)
            var minus=Math.floor(rd%3600/60)//拿到分钟
            var secos=Math.floor(rd%60)//拿到秒钟
            $('span').text(days+"天"+hours+"小时"+minus+"分钟"+secos+"秒")//获取并设置span内容
		}
		setInterval(Ro,1)//执行函数并以每秒执行
	})
	</script>
</body>
</html>

运行实例 »

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


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