案例二——网页倒计时（秒杀）

css部分

h1 {
            font-size: 30px;
            color: orangered;
            text-align: center;
            margin: 100px 0;
        }

html部分

<h1 id="h1">距离秒杀时间还剩03天20小时30分钟20秒</h1>

js部分

 //获取元素
    var h1 = document.getElementById('h1')
    //思路：使用将来的时间 - 现在的时间  = 时间差
    //第一步，先设置将来时间（固定值）
    var endDate = new Date('2022-11-11 00:00:00')
    //当定时器没有开始执行之前先调用一次函数，让他进行赋值操作，当1秒后会接着之前的赋值操作后执行

    djs()
    /*
        第二步：获取现在的时间（动态值）
        + 使用定时器，因为可以动态获取数据
    */
    //问题：由于定时器是1秒后才执行，那么函数里面进行的赋值操作会有延迟，导致页面的效果看起来体验不好
    function djs() {
        var nowDate = new Date()
        /*
                第三步：使用将来的毫秒数 - 现在的时间的毫秒数，并把毫秒转成秒数 
                + 1秒 == 1000毫秒
                + 转换使用毫秒除以1000即可
                + seconds总的秒数
        */
        var seconds = parseInt((endDate.getTime() - nowDate.getTime()) / 1000)

        //第四步：把秒分别转成天、小时、分钟、秒
        var d = transformation(parseInt(seconds / 3600 / 24))
        var h = transformation(parseInt(seconds / 3600 % 24))
        var m = transformation(parseInt(seconds / 60 % 60))
        var s = transformation(parseInt(seconds % 60))

        //第六步：进行赋值操作
        h1.innerHTML = '距离秒杀时间还剩' + d + '天' + h + '小时' + m + '分钟' + s + '秒'
    }
    setInterval(djs, 1000)

    第五步：补位操作封装
    function transformation(num) {
        return num < 10 ? num = '0' + num : num
    }

最后

以上就是秀丽咖啡豆为你收集整理的案例二——网页倒计时（秒杀）的全部内容，希望文章能够帮你解决案例二——网页倒计时（秒杀）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。