仿京东倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 200px auto;
height: 260px;
width: 190px;
background: url(images/jd.png), red;
}
.box h1 {
float: left;
width: 100%;
font-size: 30px;
font-weight: 700;
text-align: center;
color: #fff;
margin-top: 31px;
}
.time {
width: 100%;
text-align: center;
float: left;
margin-top: 90px;
color: #ffffff;
font-size: 14px;
margin-bottom: 15px;
}
.time strong {
vertical-align: middle;
font-size: 18px;
padding-right: 2px;
}
.font {
padding-left: 30px;
height: 30px;
float: left;
}
.font span {
color: #ffffff;
font-weight: 700;
font-size: 18px;
text-align: center;
line-height: 30px;
float: left;
width: 30px;
height: 30px;
background-color: #2f3430;
}
.font strong {
font-size: 18px;
display: block;
height: 100%;
float: left;
color: #ffffff;
margin: 2px 10px;
}
</style>
</head>
<body>
<div class="box">
<h1>京东秒杀</h1>
<div class="time">
<p><strong></strong>点场 倒计时</p>
</div>
<div class="font">
<span class="hour"> </span><strong>:</strong><span class="minute"></span
><strong>:</strong><span class="seconds"></span>
</div>
</div>
<script>
var lineTime = document.querySelector(".time").querySelector("strong");
var hour = document.querySelector(".hour");
var minute = document.querySelector(".minute");
var seconds = document.querySelector(".seconds");
setInterval(cutDown, 10);
cutDown();
function cutDown() {
var nowDate = new Date();
var year = nowDate.getFullYear().toString();
var month = nowDate.getMonth() + 1;
var date = nowDate.getDate();
var nowHour = parseInt(nowDate.getHours());
var lineHour = 0;
var h = 0;
if ((nowHour % 24) % 2 == 0) {
h = nowHour + 2;
} else {
h = nowHour + 1;
}
lineHour = h;
var str = year + "-" + month + "-" + date + " " + h + ":00:00"; //获取截至时间
var ms = +new Date(str) - +new Date(); //获取相差的毫秒数
var lms = parseInt((ms % 1000) / 10);
var lms = lms < 10 ? "0" + lms : lms; //获取毫秒
var num = ms / 1000;
var m = 0;
var s = 0;
h = parseInt((num / 60 / 60) % 24);
h = "0" + h; //获取小时
m = parseInt((num / 60) % 60);
m = m < 10 ? "0" + m : m; //获取分钟
s = parseInt(num % 60);
s = s < 10 ? "0" + s : s; //获取秒
lineHour = lineHour < 10 ? "0" + lineHour : lineHour;
lineTime.innerHTML = lineHour + ":00"; //装填截止时间
if (num < 60) {
hour.innerHTML = "00";
minute.innerHTML = s;
seconds.innerHTML = lms; //仅剩一分钟时的倒计时
} else {
hour.innerHTML = h;
minute.innerHTML = m;
seconds.innerHTML = s; //多与一分钟的倒计时
}
}
</script>
</body>
</html>
