版权声明: https://blog.csdn.net/qq_40999496/article/details/82746063
HTML
<!--倒计时-->
<div class="timeContainer">
<p class="timeTitle">距离开播还有</p>
<ul class="timeContentContainer clear">
<li class="timeContent">
<span class="days">00</span>
<p>DAY</p>
</li>
<li class="colon">:</li>
<li class="timeContent">
<span class="hours">00</span>
<p>HOURS</p>
</li>
<li class="colon">:</li>
<li class="timeContent">
<span class="minutes">00</span>
<p>MINUTES</p>
</li>
<li class="colon">:</li>
<li class="timeContent">
<span class="seconds">00</span>
<p>SECONDS</p>
</li>
</ul>
</div>
CSS
.timeContainer{
width: 100%;
height: 24rem;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
}
.timeTitle{
text-align: center;
color: #fff;
font-size: 1.2rem;
margin-top: 3rem;
}
.timeContentContainer{
width: 80%;
color: #fff;
margin: 3rem auto 0 auto;
}
.timeContentContainer>li{
float: left;
}
.timeContent{
width: 22%;
}
.colon{
font-size: 3rem;
font-weight: bold;
line-height: 5rem;
}
.days,.hours,.minutes,.seconds{
display: block;
width: 100%;
font-size: 4rem;
font-weight: bold;
text-align: center;
}
.timeContentContainer>li>p{
font-size: 1rem;
text-align: center;
color: #8e8d8d;
}
JS
function leftTimer(year,month,day,hour,minute,second){
var timer = null, //初始化定时器
leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()), //计算剩余的毫秒数
days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10), //计算剩余的天数
hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10),//计算剩余的小时
minutes = parseInt(leftTime / 1000 / 60 % 60, 10),//计算剩余的分钟
seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
$(".days").html(days);
$(".hours").html(hours);
$(".minutes").html(minutes);
$(".seconds").html(seconds);
}
function move() {
timer =setInterval(function () {
leftTimer(2018,09,18,11,30,00); // 设定时间
var day = parseInt($(".days").html()),
hour = parseInt($(".hours").html()),
minute = parseInt($(".minutes").html()),
second = parseInt($(".seconds").html());
//时间到,timeContainer隐藏 定时器停止
if( day === 0 && hour === 0&& minute === 0 && second === 0 ){
$(".timeContainer").css("display","none");
clearTimeout(timer);
}
},1000)
}
function checkTime(i){ //将0-9的数字前面加上0,例1变为01
if(i<10){
i = "0" + i;
}
return i;
}
move();
效果图