静态页面：原生JS模拟京东秒杀专场倒计时
Posted リ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态页面：原生JS模拟京东秒杀专场倒计时相关的知识，希望对你有一定的参考价值。
最近将BOM重新复习了一遍，本想使用定时器给女朋友做一个生日倒计时，奈何canvas都忘了。所以模拟了一个京东的秒杀专场倒计时。
各位小伙伴有什么建议和意见，请不吝赐教。
下面是京东首页的截图：
利用BOM提供的setInterval（）方法可以实现这样的一个小功能。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/模拟京东倒计时.css"/>
<script src="js/模拟京东倒计时.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 倒计时超链接 -->
<a href="https://miaosha.jd.com" id="countdownLink">
<!-- 秒杀框标题 -->
<div id="seckill">京东秒杀</div>
<!-- 促销特殊时间：时间场 -->
<div id="specialTime"></div>
<!-- 倒计时剩余时间 -->
<div id="leftTime">
<span id="hour">00</span>
<span id="minute">00</span>
<span id="second">00</span>
</div>
</a>
</body>
</html>
CSS样式表：
/* 清除默认内外边距 */ *{ padding: 0; margin: 0; } /* 设置超链接的样式 */ #countdownLink{ /* 将其变为块元素之后，设置宽高，宽高和背景图片的大小一致 */ display: block; width: 191px; height: 261px; /* 设置超链接背景图片，点击图片任何位置都能访问该超链接 */ background-image: url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/4a15d8883775742e3efbb850ae14def7.png); /* 去掉超链接里文字的下划线 */ text-decoration: none; } /* 设置秒杀框标题的样式 */ #seckill{ /* 宽度设置为父元素的100%，也就是191px */ width:100%; /* “京东秒杀”字体样式 */ font-family: "黑体"; font-weight: bold; color:white; font-size: 32px; /* “京东秒杀”在其所在盒子里居中 */ text-align: center; /* 将京东秒杀的盒子居中,由于宽度是100%，故仅设置上下外边距即可，在这里习惯性加auto*/ margin: 40px auto; } /* 消除#countDownLink和#seckill的垂直外边距重叠 */ #countdownLink::before, #countdownLink::after{ content:""; display: table; clear: both; } /* 设置场次字体大小*/ #specialTime{ /* 宽度设置为父元素的100%，也就是191px */ width:100%; height:20px; /* 内容居中 */ text-align: center; /* 字体样式 */ /* 文字大小设置默认值为15px，后面选择器里会有变动 */ font-size: 15px; color:white; font-family: "黑体"; font-weight: bold; /* 设置一个上下外边边距,其中,上外边距会与最上边盒子的下外边距重合一部分 */ margin: 75px auto 20px; } /* JS根据场次信息添加的标签,显示时间,由于时间字体偏大,就单独设置一个p标签 */ #specialTime #strong{ display: inline-block; font-size: 23px; } /* JS添加的标签,显示场次信息里的中文,字体偏小 */ #specialTime #nomal{ display: inline-block; /* 继承父元素字体大小 */ /* 调节根据基线的偏移值,使得场次时间与中文对齐 */ vertical-align: 3px; } /* 设置剩余时间所在盒子的样式 */ #leftTime{ width: 100%; text-align: center; } /* 时间子盒子的样式 */ #hour,#minute,#second{ /* 宽高 */ width: 30px; height: 30px; /* 背景 */ background-color: black; /* 字体 */ color:white; font-family: "黑体"; font-weight: bold; font-size:25px; /* 文字居中 */ text-align: center; display: inline-block; /* 左右外边距*/ margin:0 5px; /* 开启决相对定位 */ position: relative; } /* 在时和分的后面添加一个： */ #hour::after,#minute::after{ content: ":"; position: absolute; /* 调一调冒号的位置，使其与数字对齐 */ left: 32px; top: -3px; }
JS代码：
window.addEventListener("load",function(){
//设置秒杀专场开始时间基于1970年的毫秒数
var startTime = +new Date("2020-03-06T17:00:00");
//设置秒杀专场当天的00:00时基于1970年的毫秒数
var zeroOclock = +new Date("2020-03-06T00:00:00");
//将上述两个时间相减，将结果换算成24小时制的时间放在specialTime里显示用于表明多少点的场次
var h1 = (startTime-zeroOclock)/1000/60/60;
//若时间为个数，前面补个0
h1 = h1<10?"0"+h1:h1;
//获取显示场次信息的那个div元素的对象
var box = document.getElementById("specialTime");
//在里面添加两个p标签，分别存放时间和描述性中文
box.innerHTML = "<p id=\\"strong\\">"+ h1 + ":00</p>" + "<p id=\\"nomal\\">点场 倒计时</p>";
//获取时分秒盒子的对象
var span = document.getElementsByTagName("span");
//获取当前时间基于1970年的毫秒数
var now = +new Date;
// 如果开场时间未到，则不停地计时
if((startTime - now)>0){
cal();
var countDown = setInterval(cal,1000);
}
function cal(){
// 重新获取当前时间
now = +new Date();
// 计算开场时间与现在时间的差
var leftTime = startTime - now;
// 分别计算年月日
var h = parseInt(leftTime/1000/60/60%24);
h = h < 10 ? "0" + h : h;
var m = parseInt(leftTime/1000/60%60);
m = m < 10 ? "0" + m : m;
var s = parseInt(leftTime/1000%60);
s = s < 10 ? "0" + s : s;
// 如果时间到了，则停止计时，时间没到的话，就更新倒计时
if((h+m+s)!="00000000"){
span[0].innerHTML = h;
span[1].innerHTML = m;
span[2].innerHTML = s;
}else{
span[2].innerHTML = s;
clearInterval(countDown);
}
}
})
输出结果（IE8及以下不兼容）：
以上是关于静态页面：原生JS模拟京东秒杀专场倒计时的主要内容，如果未能解决你的问题，请参考以下文章