1.效果展示
2.废话不多说,直接上代码,喜欢的拿走。
<body>
<div class="countdown">
<p class="next"></p>
<p class="title">下班倒计时</p>
<p class="clock">
<span id="hour"></span>
<i>:</i>
<span id="minutes"></span>
<i>:</i>
<span id="scoud"></span>
</p>
<p class="tips"></p>
</div>
</body>
<script>
// 利用时间戳计算倒计时
// 第一种:.getTime
// 第二种:+new Date()
// 第三种:只能得到当前时间:Date.now()
// 页面显示时间
// 获取页面上需要展示时间的标签元素
let next = document.querySelector('.next')
let tips = document.querySelector('.tips')
// 调用声明的函数
getTime()
// 创建定时器,每1秒钟执行一次
setInterval(getTime, 1000)
// 声明函数
function getTime() {
let date = new Date()
let year = date.getFullYear()
let getMonth = date.getMonth() + 1
let date1 = date.getDate()
let hour = date.getHours()
hour = hour < 10 ? '0' + hour : hour
let min = date.getMinutes()
min = min < 10 ? '0' + min : min
let sec = date.getSeconds()
sec = sec < 10 ? '0' + sec : sec
next.innerHTML = `今天是 ${year} 年${getMonth}月${date1}日`
tips.innerHTML = `现在是 ${hour}:${min}:${sec}`
}
// 获取元素
let hour = document.querySelector('#hour')
let minutes = document.querySelector('#minutes')
let scoud = document.querySelector('#scoud')
// 执行函数
time()
// 创建一个定时器
setInterval(time, 1000)
// 利用时间戳声明一个下班倒计时函数
function time() {
// 1.得到现在的时间戳
let now = +new Date()
// 2.得到指定时间的时间戳
let last = +new Date('2022-12-23 17:30:00')
// 3.(计算剩余的毫秒数)/ 1000 得到剩余的秒数
let count = (last - now) / 1000
// 4.转换为时分秒
let h = parseInt(count / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
let m = parseInt(count / 60 % 60); //分
m = m < 10 ? '0' + m : m;
let s = parseInt(count % 60); //秒
s = s < 10 ? '0' + s : s;
hour.innerHTML = h
minutes.innerHTML = m
scoud.innerHTML = s
}
</script>