js实现实时倒计时效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js倒计时效果实现</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#count_down {
width: 100vw;
height: 100vh;
line-height: 100vh;
text-align: center;
background-color: black;
color: brown;
font-size: 50px;
}
</style>
</head>
<body>
<div id="count_down"></div>
<script>
function countDown() {
//首先确定现在的时间和倒计时的时间,两个时间戳相减得到毫秒数转换为秒数
let now = + new Date(), future = +new Date('2022-9-27 21:00:04'), tureTime = (future - now) / 1000
//定义变量储存值
let day = parseInt(tureTime / 60 / 60 / 24)
h = parseInt(tureTime / 60 / 60 % 24)
m = parseInt(tureTime / 60 % 60)
s = parseInt(tureTime % 60)
//最后输出到DOM节点上
let div = document.getElementById('count_down')
div.innerText = `距离倒计时还有${day}天${h}小时${m}分钟${s}秒`
}
countDown()
setInterval(countDown, 1000)
</script>
</body>
</html>