jquery-清明倒计时练习

<!DOCTYPE html>
<html>
<head>
	<title>学习jq第一节课,清明节倒计时</title>
	<!-- jquery本地引用; -->
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		div{
			width: 1200px;height: 180px;
			margin: 100px auto;
			background: lightgreen;
			text-align: center;
			line-height: 180px;
			font-size: 33px;
		}
	</style>
</head>
<body>
<div>
	<p>2019年清明节倒计时:<span> </span></p>
</div>
<script type="text/javascript">
	//测试jquery是否引入成功;typeof运算符用于判断对象的类型;
	// if (typeof $=='undefined') {
	// 	alert('ok')
	// }else{
	// 	alert('no')
	// }
	$(function(){
		function Ro(){
			// parse()方法可以解析一个日期时间字符串,并返回1970.1.1午夜距离该日期时间的毫秒数;
			// 也就是返回的是1970到你指定日期之间的毫秒数;
			var d=Date.parse("Apr 05,2019");
			var date=new Date();	//获取当前时间;
			var dd=date.getTime();	//返回1970.1.1到当前时间之间的毫秒数;
			//获取当前时间到指定日期的秒数;
			var rd=Math.floor((d-dd)/1000);	
			//获取当前时间到指定日期的向下取整的天数;
			var days=Math.floor(rd/86400);
			//获取剩余时间向下取整的小时数;
			var hours=Math.floor(rd%86400/3600);
			//获取剩余时间向下取整的分钟数;
			var minus=Math.floor(rd%3600/60)
			//获取剩余时间向下取整的秒数;
			var secos=Math.floor(rd%60)
			$('span').text(days+'天'+hours+'小时'+minus+'分'+secos)
		}
	setInterval(Ro,1000)


	})
</script>
</body>
</html>
相关文章
