倒计时
1. 基本框架
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> .countdown { width: 240px; height: 305px; text-align: center; line-height: 1; color: #fff; background-color: brown; /* background-size: 240px; */ /* float: left; */ overflow: hidden; } .countdown .next { font-size: 16px; margin: 25px 0 14px; } .countdown .title { font-size: 33px; } .countdown .tips { margin-top: 80px; font-size: 23px; } .countdown small { font-size: 17px; } .countdown .clock { width: 142px; margin: 18px auto 0; overflow: hidden; } .countdown .clock span, .countdown .clock i { display: block; text-align: center; line-height: 34px; font-size: 23px; float: left; } .countdown .clock span { width: 34px; height: 34px; border-radius: 2px; background-color: #303430; } .countdown .clock i { width: 20px; font-style: normal; } </style> </head> <body> <div class="countdown"> <p class="next">今天是2222年7月20日</p> <p class="title">下班倒计时</p> <p class="clock"> <span id="hour">01</span> <i>:</i> <span id="minutes">25</span> <i>:</i> <span id="scond">20</span> </p> <p class="tips">12:00:00下课</p> </div> <script> const hour = document.querySelector('#hour') const minutes = document.querySelector('#minutes') const scond = document.querySelector('#scond') </script> </body> </html>
样式:
2. js交互页面渲染
<script>
// 1. 获取元素
const hour = document.querySelector('#hour')
const minutes = document.querySelector('#minutes')
const scond = document.querySelector('#scond')
// 4. 开启计时器 动态显示时间 把 步骤 2 3 放在setInterval 函数里面动态获取 渲染
setInterval(function () {
// 2. 计算剩余时间戳 时间戳是毫秒
const nowTime = +new Date() // 当前时间
const fortureTime = +new Date('2022-7-20 24:00:00')
const differTime = fortureTime - nowTime
// 把时间戳转换为秒数 / 1000
const count = differTime / 1000
// d = parseInt(总秒数 / 60 / 60 / 24) // 计算天数
h = parseInt((count / 60 / 60) % 24) // 计算小时
m = parseInt((count / 60) % 60) // 计算分数
s = parseInt(count % 60) // 计算当前秒数
// console.log(h, m, s)
// 3. 渲染到指定位置
hour.innerHTML = h
minutes.innerHTML = m
scond.innerHTML = s
}, 1000)
</script>