jquery案例——五一劳动节倒计时

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery案例——五一劳动节倒计时</title> <script src="https://code.jquery.com/jque

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery案例——五一劳动节倒计时</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0}
		body{background-color: #333;}
		.box{width: 70%;height: 200px; line-height: 200px;text-align: center;color: #fff; margin: 50px auto;background: hsla(0,0%,100%,.15);border-radius: 20px;font-size: 35px;letter-spacing: 15px;}
	</style>
</head>
<body>
	<p class="box">距离五一劳动节还有<span id="date"></span></p>
<script type="text/javascript">
	// 劳动节倒计时:
	// 分析：得到劳动节那天到1970年的总毫秒数   减去   现在到1970年的总毫秒数,在换算天，小时，分钟，秒
$(function(){
	function Ro(){
		//parse 方法可解析一个日期时间字符串，并返回1970/1/1  午夜距离该日期的毫秒数
		$ftime = Date.parse('May 01 2019');  //得到劳动节距离1970年的总毫秒数
		$dtime = new Date(); //获取当前日期时间字符串
		$time = $dtime.getTime();  //得到当前时间距离1970年的总毫秒数
		$zmiao = Math.floor(($ftime-$time)/1000);  //得到现在时间距离劳动节的总秒数
		$day = Math.floor($zmiao/86400);  //得到天数    一天等于86400秒
		$hours = Math.floor($zmiao%86400/3600);  //取余  得到一天剩下的秒数，在除以3600得到小时
		$mins = Math.floor($zmiao%3600/60);//总秒数除以3600得到还剩多少小时和多少秒，取余得到还有多少秒，在除以60得到分钟
		$second = Math.floor($zmiao%60);   //总秒数除以60得到还剩多少分钟，取余得到还有多少秒
		$('#date').text($day+'天'+$hours+'小时'+$mins+'分钟'+$second+'秒');
	}
	setInterval(Ro,1000);
})


</script>
</body>
</html>

Correcting teacher：天蓬老师Correction time：2019-04-10 10:40:32
Teacher's summary：清明刚过, 就惦记着五一放假了, 看来清明没有玩好, 代码写得不错, 继续努力吧

jquery案例——五一劳动节倒计时

Popular Entries