js倒计时,现在与未来的某个时间点 相差多长时间

第一步:获取系统当前时间

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'       //未来时间

请添加图片描述

最后一点 不知道的怎么写的话 可以直接复制下面的代码 然后样式稍作修改就行了。
这里只需要找到未来时间 修改未来时间就行了 未来时间(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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值