- A+
所属分类：Web前端
模仿京东首页的倒计时
我们学习了定时器，可以用定时器做一个倒计时，于是我模仿了京东首页倒计时。
先看看京东首页的倒计时。
思路：
- 如何倒计时？
- 给一个未来的时间。然后计算未来时间到现在的时间戳。
- 用定时器每隔一秒，计算时间戳。然后把时间戳转换为时分秒。
-
转换的时候，要注意取整和取余，别搞混了。
-
最后拿到了数据，就把数据填充到静态页面中。
-
填充数据的时候，判断一下，当为个位数的时候，前面补0,确保两位数字。
这是我做出来的效果
最后附上我的代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .countdown{ width: 190px; height: 260px; margin: 0 auto; background: #E83632; background: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png); } .countdown .title{ color: #fff; font-size: 30px; text-align: center; font-weight: bold; padding-top: 30px; } .countdown .desc{ color: #fff; font-size: 14px; text-align: center; margin-top: 100px; vertical-align: middle; } .countdown .desc>strong{ font-size: 18px; vertical-align: middle; margin-right: 8px; } .countdown .time{ width: 80%; height: 30px; margin:0 auto; margin-top: 10px; color: #fff; font-size: 20px; margin-left: 25px; } .countdown .time>span{ width: 30px; height: 30px; display: inline-block; background: #2f3430; margin-left: 5px; text-align: center; font-weight: bold; padding-top: 4px; } </style> </head> <body> <div class="countdown"> <div class="title">京东秒杀</div> <div class="desc"> <strong></strong>点倒计时 </div> <div class="time"> <span class="h"></span> : <span class="m"></span> : <span class="s"></span> </div> </div> <script> //封装为Date的内置函数 Date.prototype.countdown = function countdown(endDate){ if(!(endDate instanceof Date)){ console.error('Uncaught TypeError :'+endDate+'不是Date类型'); return undefined; } var nowDate = new Date(); //定义cha为时间差 ,接收 现在到结束时的时间戳 var cha = endDate.getTime() - nowDate.getTime(); var year = parseInt(cha / (365*24*60*60*1000)); var value = cha % (365*24*60*60*1000); var day = parseInt(value / (24*60*60*1000)); var h = parseInt(value / (60*60*1000)); value = value % (60*60*1000); var m = parseInt(value / (60*1000)); value = value % (60*1000); var s = parseInt(value / (1000)); var ms = parseInt(s); return {year,day,h,m,s,ms}; } var djs = setInterval(function(){ //设置结束时间:月份从0-11，0代表1月份，11就是12月份 var endDate = new Date(2021,0,25,0,0,0,0); //匿名调用Date的自定义内置函数,传入结束的日期,返回一个对象 var obj = new Date().countdown(endDate); //对返回值结果判定 if( undefined === obj){ clearInterval(djs); return; } //获取倒计时需要渲染的元素 var end = document.querySelector('strong'); var h = document.querySelector('.h'); var m = document.querySelector('.m'); var s = document.querySelector('.s'); //时分秒为个位数时，前面补0 if(obj.s < 10) obj.s = '0'+obj.s; if(obj.m < 10) obj.m = '0'+obj.m; if(obj.h < 10) obj.h = '0'+obj.h; //把数据渲染到页面 s.innerHTML = obj.s; m.innerHTML = obj.m; h.innerHTML = obj.h; end.innerHTML = endDate.getHours(); //时间到了清除定时器 if( 0===obj.h && 0===obj.m && 0===obj.s ){ clearInterval(djs); } },1000); </script> </body> </html> 
