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

来源:互联网 发布:淘宝文案兼职一篇多少 编辑:程序博客网 时间:2024/04/30 16:28


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

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

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

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

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


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

[html] view plaincopyprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <style type="text/css">  
  6.         </style>  
  7.         <script>  
  8.         /***  
  9.         注意点:  
  10.             1)getMonth()返回值是 0——11  
  11.             2)getDay()返回星期几(0——6)  
  12.                0 —— 星期日  
  13.                1 —— 想起一  
  14.                2 —— 星期二  
  15.                3 —— 星期三  
  16.                4 —— 星期四  
  17.                5 —— 星期五  
  18.                6 —— 星期六  
  19.             思想:放入数组,利用数组下标与getDay()的值对应取值  
  20.   
  21.             3)实现时钟自动计时的效果  
  22.               使用setTimeout  
  23.               注意:循环调用setTimeout的方法,将setTimeout写在执行函数内部  
  24.   
  25.             4)细节问题:将一位数处理成两位数的表示  
  26.         ***/  
  27.         window.onload = function(){  
  28.             showTime();  
  29.         }  
  30.   
  31.         //将小于两位的数字表示成两位  
  32.         function checkTime(num){  
  33.             if(num < 10){  
  34.                 num = "0"+ num;  
  35.             }  
  36.             return num;  
  37.         }  
  38.         function showTime(){  
  39.                 var myDate = new Date();  
  40.                 var year = myDate.getFullYear();  
  41.                 var month = myDate.getMonth() + 1;  
  42.                 var date = myDate.getDate();  
  43.                 var day = myDate.getDay(); //0——6  
  44.                 //将固定的值存放数组中,利用下标取值。  
  45.                 var weekday = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];  
  46.   
  47.                 var h = myDate.getHours();  
  48.                 var m = myDate.getMinutes();  
  49.                 var s = myDate.getSeconds();  
  50.   
  51.                 h = checkTime(h);  
  52.                 m = checkTime(m);  
  53.                 s = checkTime(s);  
  54.                 var html = year+"年"+month+"月"+date+"日 "+weekday[day]+h+":"+m+":"+s  
  55.                 document.getElementById("showtime").innerHTML = html;  
  56.   
  57.                 //setTimeout()虽然只表示执行一次调用,但是这里把setTimeout(showTime,500)  
  58.                 //放在了showTime()函数里面,这样每个0.5秒又会调用一次setTimeout(showTime,500);  
  59.                 setTimeout(showTime,500);  
  60.             }  
  61.         </script>  
  62.     </head>  
  63.     <body>  
  64.         <div>当前时间:<span id="showtime"></span></div>  
  65.     </body>  
  66. </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代码及实现关键点如下:

[html] view plaincopyprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <style type="text/css">  
  6.         </style>  
  7.         <script>  
  8.         /***  
  9.         倒计时关键点:  
  10.         1)知道当前时间new Date()和结束时间new Date("2014,12,27");  
  11.            可通过new Date("2014,12,27");自定义时间  
  12.         2)调用getTime()将时间转换成毫秒来进行运算  
  13.         3)将毫秒转换成天的计算  
  14.            1天 = 24h, 1h=60m1m=60s1s=1000ms  
  15.         4)Math.ceil —— 向上取整 (Math.ceil(12.2) == 13)  
  16.           Math.floor —— 向下取整 (Math.floor(12.9) == 12)  
  17.           Math.round —— 四舍五入 (Math.round(12.2) == 12 ;Math.round(12.9) == 13)  
  18.   
  19.           此处采用向上取整  
  20.               
  21.         ***/  
  22.         window.onload = function(){  
  23.             var currTime = new Date();  
  24.             var endTime = new Date("2014,12,27");  
  25.             var days = Math.ceil((endTime.getTime() - currTime.getTime())/(24*60*60*1000));  
  26.             if(days>0){  
  27.                 document.getElementById("showtime").innerHTML = days;  
  28.             }  
  29.         }  
  30.         </script>  
  31.     </head>  
  32.     <body>  
  33.         <div>距离研究生考试时间还有:<span id="showtime"></span></div>  
  34.     </body>  
  35. </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代码及实现关键点总结如下:

[html] view plaincopyprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <style type="text/css">  
  6.         </style>  
  7.         <script>  
  8.         /***  
  9.         倒计时关键点:  
  10.         1)知道当前时间new Date()和结束时间new Date("2014,12,27");  
  11.            可通过new Date("2014,12,27");自定义时间  
  12.         2)调用getTime()将时间转换成毫秒来进行运算  
  13.         3)将毫秒转换成天的计算  
  14.            1天 = 24h, 1h=60m1m=60s1s=1000ms  
  15.         4)parseInt()用于取整,只取数字的整数部分,即省掉小数部分。  
  16.           如果是字符串就只取字符串中开头的数字,如果开头没有数字就返回NaN。  
  17.         5)计算剩余小时,分钟,秒需要注意的问题:  
  18.             需要采用求余,整数部分是比其大一单位的,所以需要取余数部分,  
  19.             采用parseInt()再取整数部分,是因为小数部分是比其小一单位的来计算。  
  20.             比如求还剩多少小时:  
  21.             times的单位是秒,先把times换算成小时,即times/(60*60),  
  22.             总的剩余times/(60*60)小时,但是现在要除去天的时间,  
  23.             所以times/(60*60)%24 去掉了天的部分,取余得到小时,此时times/(60*60)%24可能为小时,  
  24.             调用parseInt(times/(60*60)%24)取整  
  25.         6)实现倒计时,采用setTimeout()  
  26.            注意:循环调用setTimeout的方法,将setTimeout写在执行函数内部  
  27.               
  28.         ***/  
  29.         window.onload = function(){  
  30.             autoCount();  
  31.         }  
  32.   
  33.         //实现自动倒计时  
  34.         function autoCount(){  
  35.             var currTime = new Date();  
  36.             var endTime = new Date("2014,12,27");  
  37.             var times = (endTime.getTime()-currTime.getTime())/1000;  //换算成秒  
  38.             var surplusDay = parseInt(times/(24*60*60));  
  39.             var surplusH = parseInt(times/(60*60)%24);  
  40.             var surplusM = parseInt(times/60%60);  
  41.             var surplusS = parseInt(times%60);  
  42.   
  43.             if(times < 0){  
  44.                 document.getElementById("box").innerHTML = "抢购已结束";  
  45.             }else{  
  46.                 document.getElementById("showtime").innerHTML = surplusDay+"天"+surplusH+"时"+surplusM+"分"+surplusS+"秒";  
  47.   
  48.                 setTimeout(autoCount,"500");  
  49.             }  
  50.         }  
  51.         </script>  
  52.     </head>  
  53.     <body>  
  54.         <div id="box">***限时抢***还剩:<span id="showtime"></span></div>  
  55.     </body>  
  56. </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写在执行函数内部

0 0
原创粉丝点击