博客列表 >JQ定时器作业-php五期线上班

JQ定时器作业-php五期线上班

哥特的博客
哥特的博客原创
2019年04月02日 10:16:40702浏览

作业总结:创建一个函数,在函数体内新建一个变量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>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议