《js倒计时效果》之限时抢
来源:互联网 发布:淘宝文案兼职一篇多少 编辑:程序博客网 时间:2024/04/30 16:28
学习资源来自慕课网《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关键点小结:
倒计时关键点:
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>
示图:
例子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写在执行函数内部
- 《js倒计时效果》之限时抢
- 《js倒计时效果》之限时抢
- JS-商场限时抢倒计时效果
- js实现限时抢倒计时
- js显示当前时间(动态)以及限时抢购倒计时
- 限时抢购团购倒计时活动完整js代码
- JS节日倒计时效果
- js实现倒计时效果
- JS实现倒计时效果
- js实现倒计时效果
- JQuery限时抢购 倒计时
- 限时抢购倒计时
- js效果60秒倒计时
- zencart JS倒计时效果代码
- js实现页面倒计时效果
- 短信验证js 倒计时效果
- js 实现自动更新倒计时效果
- JS倒计时效果+数字图片
- VirtualBox 配置网络(Host-Only)
- 《js实现图片缓慢缩放的效果》之学习总结
- NSString的使用, 比较全 转得
- CSDN论坛RSS阅读,平板电脑专用(csdn移动端)
- CUDA内存拷贝
- 《js倒计时效果》之限时抢
- 【大话设计】之个别模式总结(一)
- 黑马程序员 JAVA基础学习笔记 主函数等
- 《js动画效果》之同时运动兼完美运动框架
- 《js动画效果》之链式运动
- HDU 2612 Find a way 多起点 多终点 BFS
- 《js动画效果》之获取元素属性
- 如何发布自定义的python模块
- 《js动画效果》之多物体动画