《js倒计时效果》之限时抢

最新推荐文章于 2024-05-02 16:46:30 发布

MMRS

最新推荐文章于 2024-05-02 16:46:30 发布

阅读量1.3k

点赞数 1

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/40111091

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

学习资源来自慕课网《js倒计时效果》：http://www.imooc.com/learn/59。

本课程有三个小例子，循序渐进。跟着视频教程练习编写了三个例子的代码，现将学到的关键点及代码总结如下：

1. js代码实现年月日、星期、时分秒的显示，且实现自动计时的效果。

2.js代码实现倒计时高考时间（研究生考试时间或别的例子）还剩多少天。

3.js代码实现限时抢购还剩？天？时？分？秒的计算并显示，要求实现自动倒计时效果。

例子1代码及实现关键点如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		</style>
		<script>
		/***
		注意点：
			1）getMonth()返回值是 0——11
			2）getDay()返回星期几（0——6）
			   0 —— 星期日
			   1 —— 想起一
			   2 —— 星期二
			   3 —— 星期三
			   4 —— 星期四
			   5 —— 星期五
			   6 —— 星期六
			思想：放入数组，利用数组下标与getDay()的值对应取值

			3)实现时钟自动计时的效果
			  使用setTimeout
			  注意：循环调用setTimeout的方法，将setTimeout写在执行函数内部

			4）细节问题：将一位数处理成两位数的表示
		***/
		window.onload = function(){
			showTime();
		}

		//将小于两位的数字表示成两位
		function checkTime(num){
			if(num < 10){
				num = "0"+ num;
			}
			return num;
		}
		function showTime(){
				var myDate = new Date();
				var year = myDate.getFullYear();
				var month = myDate.getMonth() + 1;
				var date = myDate.getDate();
				var day = myDate.getDay(); //0——6
				//将固定的值存放数组中，利用下标取值。
				var weekday = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

				var h = myDate.getHours();
				var m = myDate.getMinutes();
				var s = myDate.getSeconds();

				h = checkTime(h);
				m = checkTime(m);
				s = checkTime(s);
				var html = year+"年"+month+"月"+date+"日 "+weekday[day]+h+":"+m+":"+s
				document.getElementById("showtime").innerHTML = html;

				//setTimeout()虽然只表示执行一次调用，但是这里把setTimeout(showTime,500)
				//放在了showTime()函数里面，这样每个0.5秒又会调用一次setTimeout(showTime,500);
				setTimeout(showTime,500);
			}
		</script>
	</head>
	<body>
		<div>当前时间：<span id="showtime"></span></div>
	</body>
</html>

例子1示图：

例子1小结：

实现注意点：

1）getMonth()返回值是 0——11

2）getDay()返回星期几（0——6）

0 —— 星期日

1 —— 星期一

2 —— 星期二

3 —— 星期三

4 —— 星期四

5 —— 星期五

6 —— 星期六

思想：放入数组，利用数组下标与getDay()的值对应取值

3)实现时钟自动计时的效果

使用setTimeout

注意：循环调用setTimeout的方法，将setTimeout写在执行函数内部

4）细节问题：将一位数处理成两位数的表示

例子2代码及实现关键点如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		</style>
		<script>
		/***
		倒计时关键点：
		1）知道当前时间new Date()和结束时间new Date("2014,12,27");
		   可通过new Date("2014,12,27");自定义时间
		2）调用getTime()将时间转换成毫秒来进行运算
		3）将毫秒转换成天的计算
		   1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms
		4)Math.ceil —— 向上取整 （Math.ceil(12.2) == 13）
		  Math.floor —— 向下取整 (Math.floor(12.9) == 12)
		  Math.round —— 四舍五入 (Math.round(12.2) == 12 ;Math.round(12.9) == 13)

		  此处采用向上取整
			
		***/
		window.onload = function(){
			var currTime = new Date();
			var endTime = new Date("2014,12,27");
			var days = Math.ceil((endTime.getTime() - currTime.getTime())/(24*60*60*1000));
			if(days>0){
				document.getElementById("showtime").innerHTML = days;
			}
		}
		</script>
	</head>
	<body>
		<div>距离研究生考试时间还有：<span id="showtime"></span>天</div>
	</body>
</html>

例子2示图：

例子2关键点小结：

倒计时关键点：

1）知道当前时间new Date()和结束时间new Date("2014,12,27"); 可通过new Date("2014,12,27");自定义时间

2）调用getTime()将时间转换成毫秒来进行运算

3）将毫秒转换成天的计算

1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms

4)Math.ceil —— 向上取整（Math.ceil(12.2) == 13）

Math.floor —— 向下取整 (Math.floor(12.9) == 12)

Math.round —— 四舍五入 (Math.round(12.2) == 12 ;Math.round(12.9) == 13)

此处采用向上取整

例子3代码及实现关键点总结如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		</style>
		<script>
		/***
		倒计时关键点：
		1）知道当前时间new Date()和结束时间new Date("2014,12,27");
		   可通过new Date("2014,12,27");自定义时间
		2）调用getTime()将时间转换成毫秒来进行运算
		3）将毫秒转换成天的计算
		   1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms
		4)parseInt()用于取整，只取数字的整数部分，即省掉小数部分。
		  如果是字符串就只取字符串中开头的数字，如果开头没有数字就返回NaN。
		5）计算剩余小时，分钟，秒需要注意的问题：
			需要采用求余，整数部分是比其大一单位的，所以需要取余数部分，
			采用parseInt()再取整数部分，是因为小数部分是比其小一单位的来计算。
			比如求还剩多少小时：
			times的单位是秒，先把times换算成小时，即times/(60*60)，
			总的剩余times/(60*60)小时，但是现在要除去天的时间，
			所以times/(60*60)%24 去掉了天的部分，取余得到小时，此时times/(60*60)%24可能为小时，
			调用parseInt(times/(60*60)%24)取整
		6）实现倒计时，采用setTimeout()
		   注意：循环调用setTimeout的方法，将setTimeout写在执行函数内部
			
		***/
		window.onload = function(){
			autoCount();
		}

		//实现自动倒计时
		function autoCount(){
			var currTime = new Date();
			var endTime = new Date("2014,12,27");
			var times = (endTime.getTime()-currTime.getTime())/1000;  //换算成秒
			var surplusDay = parseInt(times/(24*60*60));
			var surplusH = parseInt(times/(60*60)%24);
			var surplusM = parseInt(times/60%60);
			var surplusS = parseInt(times%60);

			if(times < 0){
				document.getElementById("box").innerHTML = "抢购已结束";
			}else{
				document.getElementById("showtime").innerHTML = surplusDay+"天"+surplusH+"时"+surplusM+"分"+surplusS+"秒";

				setTimeout(autoCount,"500");
			}
		}
		</script>
	</head>
	<body>
		<div id="box">***限时抢***还剩：<span id="showtime"></span></div>
	</body>
</html>

示图：