<!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>
* {
padding: 0;
margin: 0;
}
.top {
width: 100%;
height: 212px;
background: url("./1.png") no-repeat center center;
background-size: 100% 100%;
position: relative;
}
.time {
text-align: center;
color: #fff;
position: absolute;
top: 120px;
width: 100%;
font-size: 17px;
}
span {
background-color: #fff;
padding: 0 2px;
color: #BD1246;
margin: 0 5px;
border-radius: 5px;
font-size: 15px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div class="time"></div>
</div>
</div>
<script>
let time = new Date('2020-11-11 00:00:00').getTime() / 1000
console.log(time);
let timer = setInterval(() => {
let now = new Date().getTime() / 1000
let obj = getTime(time - now)
document.querySelector('.time').innerHTML = `<span>${obj.d}</span>天<span>${obj.h}</span>时<span>${obj.m}</span>分<span>${obj.s}</span>秒`
}, 1000)
function getTime(time) {
time = time < 0 ? 0 : time
var obj = {}
// 计算多少天,多少小时(24小时以内)
var d = parseInt((time / (60 * 60)) / 24)
var h = parseInt((time / (60 * 60)) % 24)
// 不计算天,最大以小时来记
// var h = parseInt(time / (60 * 60))
var m = parseInt((time / 60) % 60)
var s = parseInt(time % 60)
obj.d = addZero(d)
obj.h = addZero(h)
obj.m = addZero(m)
obj.s = addZero(s)
return obj
}
function addZero(i) {
return i < 10 ? '0' + i : i + ''
}
</script>
</body>
</html>
倒计时
最新推荐文章于 2022-07-04 17:59:43 发布