利用JavaScript原生写一个下班倒计时小案例

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>
利用JavaScript原生写一个下班倒计时小案例

猜你喜欢
