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

来源：互联网发布：阿里云幕布是免费的吗编辑：程序博客网时间：2024/04/29 13:16

学习资源来自慕课网《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——112）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+":"+sdocument.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=1000ms4)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=1000ms4)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>

示图：

例子3关键点小结：

倒计时关键点：

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写在执行函数内部

1 0