Blogger Information
Blog 27
fans 1
comment 1
visits 21842
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JQ定时器作业-php五期线上班
哥特的博客
Original
704 people have browsed it

作业总结:创建一个函数,在函数体内新建一个变量endTime,并赋值new一个Date('2019,5,1)'的对象,(个人认为这样比课堂代码写的更容易阅读和记忆),然后再新建一个变量命名为data 并赋值 new Data(),以获取当前时间。 新建一个变量rd取值(endTime-data)/1000,为的是删除毫秒数并取整。

新建变量D以获取剩余天数 赋值用rd除以86400的整数 (60秒*60分*24小时=86400 其实就是一天的秒数)

新建变量H以获取剩余小时 赋值用rd取整86400除以3600 

新建变量M以获取剩余分钟 赋值用rd取整3600除以60

新建变量S以获取剩余秒 赋值用rd取整360

获取span标签,在标签内部使用.text函数写入所获取到的值

$('span').text(D+'天'+H+'小时'+M+'分钟'+S+'秒')

函数体外部执行函数,然后使用定时函数每个1000毫秒运行一次函数即可


QQ截图20190402101612.jpg

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>time</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			font-size: 14px;
		}
		.box{
			width: 1200px;
			height: 300px;
			line-height: 300px;
			background: #ff6700;
			margin: 30px auto;
			text-align: center;
		}
		p,span{
			font-size: 50px;
			color:#fff;
		}
	</style>
</head>
<body>
	<div class="box">
		<p>距离劳动节还剩<span></span></p>
	</div>
	<script type="text/javascript">
			$(function(){
				function Time1(){
					// 获取剩余时间,我觉得这样比课堂的代码更简单
					var endTime =  new Date('2019,5,1')  ;
					// var endTime =  Date.parse('2019,4,5')  ;

					var data = new Date();
					// var time_2 = time_1.getYear();
					// 获取一下剩余的时间,去除毫秒
					var rd = Math.floor((endTime-data)/1000);
					console.log(rd);
					// 获得天数
					var D = Math.floor(rd/86400);
					console.log(D);
					// 取余获得剩余小时数
					var H = Math.floor(rd%86400/3600);
					console.log(H);
					// 取余获得剩余分钟数
					var M = Math.floor(rd%3600/60);
					console.log(M);
					// 取余获得剩余秒
					var S = Math.floor(rd%60);
					console.log(S);
					$('span').text(D+'天'+H+'小时'+M+'分钟'+S+'秒')
				}
				Time1();
				setInterval(Time1,1000);
			})
	</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