js模仿京東首頁的倒計時功能
- 2021 年 1 月 24 日
- 筆記
- javascript, JavaScript-練習
模仿京東首頁的倒計時
我們學習了定時器，可以用定時器做一個倒計時，於是我模仿了京東首頁倒計時。
先看看京東首頁的倒計時。
思路：
- 如何倒計時？
- 給一個未來的時間。然後計算未來時間到現在的時間戳。
- 用定時器每隔一秒，計算時間戳。然後把時間戳轉換為時分秒。
-
轉換的時候，要注意取整和取余，別搞混了。
-
最後拿到了數據，就把數據填充到靜態頁面中。
-
填充數據的時候，判斷一下，當為個位數的時候，前面補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>
