欢迎光临
我的个人博客网站

js模仿京东首页的倒计时功能


模仿京东首页的倒计时

我们学习了定时器,可以用定时器做一个倒计时,于是我模仿了京东首页倒计时。

先看看京东首页的倒计时。
js模仿京东首页的倒计时功能

思路:

  1. 如何倒计时?
  • 给一个未来的时间。然后计算未来时间到现在的时间戳。
  • 用定时器每隔一秒,计算时间戳。然后把时间戳转换为时分秒。
  1. 转换的时候,要注意取整和取余,别搞混了。

  2. 最后拿到了数据,就把数据填充到静态页面中。

  3. 填充数据的时候,判断一下,当为个位数的时候,前面补0,确保两位数字。

这是我做出来的效果
js模仿京东首页的倒计时功能

最后附上我的代码

<!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>  
赞(0) 打赏
未经允许不得转载:张拓的天空 » js模仿京东首页的倒计时功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏