模仿京东首页的倒计时
我们学习了定时器，可以用定时器做一个倒计时，于是我模仿了京东首页倒计时。
先看看京东首页的倒计时。
思路：
- 如何倒计时？
- 给一个未来的时间。然后计算未来时间到现在的时间戳。
- 用定时器每隔一秒，计算时间戳。然后把时间戳转换为时分秒。
转换的时候，要注意取整和取余，别搞混了。
最后拿到了数据，就把数据填充到静态页面中。
填充数据的时候，判断一下，当为个位数的时候，前面补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 > <div >京东秒杀</div> <div > <strong></strong>点倒计时 </div> <div > <span ></span> : <span ></span> : <span ></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>原文转载：http://www.shaoqun.com/a/512693.html
hunter：https://www.ikjzd.com/w/992
邮乐网购：https://www.ikjzd.com/w/1776
https://www.jd.com/模仿京东首页的倒计时我们学习了定时器，可以用定时器做一个倒计时，于是我模仿了京东首页倒计时。先看看京东首页的倒计时。思路：如何倒计时？给一个未来的时间。然后计算未来时间到现在的时间戳。用定时器每隔一秒，计算时间戳。然后把时间戳转换为时分秒。转换的时候，要注意取整和取余，别搞混了。最后拿到了数据，就把数据填充到静态页面中。填充数据的时候，判断一下，当为个位数的时
知无不言：知无不言
DMM：DMM
外贸必备要点：在英文邮件中20个可以替代Please Find Attached的短语和表述：外贸必备要点：在英文邮件中20个可以替代Please Find Attached的短语和表述
2020江西井冈山杜鹃花节什么时候开始？：2020江西井冈山杜鹃花节什么时候开始？
印度将禁止亚马逊等电商平台通过附属公司销售自营产品！：印度将禁止亚马逊等电商平台通过附属公司销售自营产品！
No comments:
Post a Comment