js模仿京东首页的倒计时功能
模仿京东首页的倒计时
我们知道js有个setTimeout/setInterval定时器，可以用定时器做一个倒计时，于是我模仿了京东首页倒计时。
先看看京东首页的倒计时。
思路：
- 如何倒计时？
- 给一个未来的时间。然后计算未来时间到现在的时间戳。
- 用定时器每隔一秒，计算时间戳。然后把时间戳转换为时分秒。
-
转换的时候，要注意取整和取余，别搞混了。
-
最后拿到了数据，就把数据填充到静态页面中。
-
填充数据的时候，判断一下，当为个位数的时候，前面补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>
