【表面认真工作内心倒计时下班】JavaScript实现下班倒计时原理代码大放送

Lilas_lp

已于 2023-06-15 14:54:31 修改

阅读量413

点赞数 1

分类专栏： Html 文章标签：前端 html javascript

于 2023-06-13 11:54:22 首次发布

本文链接：https://blog.csdn.net/qq_39053858/article/details/131184456

版权

效果如下 (๑•̀ㅁ•́ฅ)

分析思路 (๑˙o˙๑)

设置每秒执行一次的定时器，定时器内获取当前时间和下班时间的毫秒数差，将时间差转换为时分秒显示在页面上。

呈上代码 (ฅ´ω`ฅ)

HTML

<div class="main">
    <div class="hour">00</div> <!--小时-->
    <div class="symbol">:</div>
    <div class="minute">00</div> <!--分钟-->
    <div class="symbol">: </div>
    <div class="second">00</div> <!--秒-->
</div>

<script>
    var getOffWork = '17:30:00'; //下班时间
    var hour = document.querySelector('.hour'); //获取小时元素
    var minute = document.querySelector('.minute'); //获取分钟元素
    var second = document.querySelector('.second'); //获取秒元素
    var main = document.querySelector('.main'); //获取时间元素
     (function() {
        countDown(); //立即执行函数，确保用户进入页面时看到倒计时
     })()
     setInterval(countDown, 1000); //每秒执行一次定时器

     function countDown() {
        var date1 = new Date();
        var y1 = date1.getFullYear(); //获取当天的年份
        var m1 = date1.getMonth() + 1; //获取当天的月份并且补零
        if (m