第一步：获取系统当前时间
HTML：
<button class="time-button public_button">
距离开售 <span class="hours">21</span> :
<span class="minutes">00</span> :
<span class="seconds">56</span>
</button>
//获取当前时间
function getTime(){
let data = new Date()
let y = data.getFullYear() //年
let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //月
let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate() //日
let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours() //时
let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes() //分
let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds() //秒
let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}` //当前时间 格式：2022/09/08 09:09:09
let data2 = '2022/09/28 17:30:00' //未来时间
//这里返回两个参数 一个当前的系统时间 一个 未来的时间
return{
data1, //当前时间
data2 //未来时间
}
}
let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1)//看不懂这种写法的，可以理解为 小于10的 前面加个0拼接上去 例如系统默认是(2000/9/9) 而这种写法最终格式（2022/09/09）
第二步：
获取dom的类，也就是渲染的倒计时模块
//获取倒计时的类
let class_hours = document.querySelector('.hours')
let class_minutes = document.querySelector('.minutes')
let class_seconds = document.querySelector('.seconds')
第三步：
计算时间 也就是：未来时间 - 当前时间 = 中间相差多长时间
//使用毫秒转换时分秒
function formatDuring(){
//时间转换并取得毫秒
let dayTime = new Date(getTime().data1)
let future = new Date(getTime().data2)
//取得毫秒
let mss = parseInt(future - dayTime)
// console.log('ss：',parseInt(future - dayTime))
//毫秒转 天时分秒
let day = parseInt(mss / (1000*60*60*24)) //天数
let hours = parseInt((mss % (1000*60*60*24)) / (1000*60*60)) //小时
let minutes = parseInt((mss % (1000*60*60)) / (1000*60)) //分钟
let seconds = parseInt(mss % (1000*60)) / 1000 //秒
//天数大于0 则 天*24 取得小时 并与今日小时相加
if(day > 0){
hours += (day * 24)
}
//渲染到页面
class_hours.innerHTML = `${hours < 10 ? '0' + hours : hours}`
class_minutes.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`
class_seconds.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`
let time = `${hours}:${minutes}:${seconds}`
//判断时间是否到时
if(hours <= 0 && minutes <= 0 && seconds <= 0){
time = 0
}
return time
}
第四步：
获取按钮元素
//获取按钮元素
let time_button = document.querySelector('.time-button') //倒计时按钮
第五步：
启用定时器开始倒计时
//开始倒计时
let timeVal = setInterval(()=>{
// let time = `${hours}:${minutes}:${seconds}`
//这里如果 return给的0代表时间已经走完
if(formatDuring() <= 0){
console.log("12",formatDuring())
//倒计时走完则清除倒计时按钮
time_button.remove()
clearInterval(timeVal)
}
},1000)
第六步：
查看效果，mp4转gif有点浑 自己看大致效果吧
当前时间（2022/09/28 14:06:xx） - 未来时间（2022/09/28 14:07:00）= 下方效果图
let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}` //当前时间
let data2 = '2022/09/28 14:07:00' //未来时间
QQ录屏20220928140705.gif
最后一点 不知道的怎么写的话 可以直接复制下面的代码 然后样式稍作修改就行了。
这里只需要找到未来时间 修改未来时间就行了未来时间（let data2 = '2022/09/28 14:20:00'）修改这个就行
在运行之前先修改未来时间 不然看着是无效果的
<button class="time-button public_button">
距离开售 <span class="hours">21</span> :
<span class="minutes">00</span> :
<span class="seconds">56</span>
</button>
<script>
//获取当前时间
function getTime(){
let data = new Date()
let y = data.getFullYear() //年
let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //月
let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate() //日
let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours() //时
let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes() //分
let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds() //秒
let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}` //当前时间 格式：2022/09/08 09:09:09
let data2 = '2022/09/28 14:20:00' //未来时间
//这里返回两个参数 一个当前的系统时间 一个 未来的时间
return{
data1, //当前时间
data2 //未来时间
}
}
//获取倒计时的类
let class_hours = document.querySelector('.hours')
let class_minutes = document.querySelector('.minutes')
let class_seconds = document.querySelector('.seconds')
//使用毫秒转换时分秒
function formatDuring(){
//时间转换并取得毫秒
let dayTime = new Date(getTime().data1)
let future = new Date(getTime().data2)
//取得毫秒
let mss = parseInt(future - dayTime)
// console.log('ss：',parseInt(future - dayTime))
//毫秒转 天时分秒
let day = parseInt(mss / (1000*60*60*24)) //天数
let hours = parseInt((mss % (1000*60*60*24)) / (1000*60*60)) //小时
let minutes = parseInt((mss % (1000*60*60)) / (1000*60)) //分钟
let seconds = parseInt(mss % (1000*60)) / 1000 //秒
//天数大于0 则 天*24 取得小时 并与今日小时相加
if(day > 0){
hours += (day * 24)
}
//渲染到页面
class_hours.innerHTML = `${hours < 10 ? '0' + hours : hours}`
class_minutes.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`
class_seconds.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`
let time = `${hours}:${minutes}:${seconds}`
//判断时间是否到时
if(hours <= 0 && minutes <= 0 && seconds <= 0){
time = 0
}
return time
}
//获取按钮元素
let time_button = document.querySelector('.time-button') //倒计时按钮
//开始倒计时
let timeVal = setInterval(()=>{
// let time = `${hours}:${minutes}:${seconds}`
//这里如果 return给的0代表时间已经走完
if(formatDuring() <= 0){
console.log("12",formatDuring())
//倒计时走完则清除倒计时按钮
time_button.remove()
clearInterval(timeVal)
}
},1000)
</script>
网友评论