原生js倒计时

最新推荐文章于 2024-10-07 09:24:46 发布

恶伴

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量176

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_58980887/article/details/137978409

版权

本文介绍了如何在Vue项目中使用JavaScript实现一个倒计时功能，包括获取当前时间、处理时分秒、更新DOM节点以及在倒计时结束时的操作。

摘要由CSDN通过智能技术生成

分析：

1.倒计时需要获取现在的时间和理想倒中倒计时的时间做比较

2.获取到时间，之后主要做时分秒的处理

3.获取到dom节点，把处理好的时间，放入dom节点内

废话少说，直接上代码：

<template>
  <div class="about">
    <div id="countdown"></div>
  </div>
</template>


<script lang="ts" setup>
import  {onMounted,ref} from "vue";

 onMounted(()=>{
     let Time = 60*60*1000;//一个小时的室秒数
     chazhis(Time)

 })


let chazhis = (Time:number) =>{
    console.log('+++++++++++++++++++倒计时中');
    //获取dom
    let Dom:any = document.getElementById("countdown");
    // 获取当前时间
    let currentTime :number = new Date().getTime();

    //开始时间
    let startTime:number = 1713531400000

    console.log(startTime,'+++++开始时间')

    //计算剩余时间
    let elapsedTime:number = currentTime - startTime
    console.log(elapsedTime,'+++++剩余时间')

    let  remainingTime =  Time + elapsedTime;
    console.log(remainingTime,'+++++剩余时间')

    let  timer = setInterval(()=>{
        remainingTime -=1000; //每秒减去1000秒

        //计算剩余时间中的小时数、分钟数和秒数
        let hours = addLeadingZero(Math.floor((remainingTime % (1000 * 60* 60 * 24))/(1000 * 60* 60)));
        let minutes = addLeadingZero( Math.floor((remainingTime % (1000*60*60))/(1000 * 60)));
        let seconds = addLeadingZero( Math.floor((remainingTime % (1000 * 60))/ 1000));

        Dom.textContent =`${hours}:${minutes}:${seconds}`; //把值赋给dom节点

        //当倒计时为零执行操作
        if (remainingTime <= 0){
            //清除定时器
            clearInterval(timer)
            Dom.textContent =`倒计时结束`;
        }
    },1000)

}



let addLeadingZero = (number:any)=>{ //补零操作
    return number <10 ? "0"+number :number;
}