购物倒计时秒杀

2019-06-08  本文已影响0人  凌晨4点的简书

我们在网上购物时,经常看的到活动秒杀的情况,我们自身实现一个来试试

function miaosha() {
    //获取倒计时的li标签
    var timerLis = document.querySelectorAll('.Interval>ul>li');
    //倒计时        实参接收
    function date(y, m, d, h, mm) {
        //设置未来时间
        var future = new Date(y, m, d, h, mm);
        //设置剩余的时间
        var shengyu = (future - new Date()) / 1000;
        //天
        var day = parseInt(shengyu / 60 / 60 / 24);
        //时
        var hours = parseInt(shengyu / 60 / 60 % 24);
        //分
        var minutes = parseInt(shengyu / 60 % 60);
        //秒
        var second = parseInt(shengyu % 60);
        //判断如果剩余的时间小于0,也就是倒计时已结束,返回出去。
        if (shengyu <= 0) {
            return shengyu;
        }
        //补零
        function addZero(num) {
            return num < 10 ? '0' + num : num;
        }
        //将倒计时天,时,分,秒传入页面li中
        timerLis[0].innerHTML = addZero(day);
        timerLis[1].innerHTML = addZero(hours);
        timerLis[2].innerHTML = addZero(minutes);
        timerLis[3].innerHTML = addZero(second);
        // console.log(day, hours, minutes, second);
    } 
    //形参  年,月(一定要注意,月份从0开始,所以设置月份要-1),日,时,分    
    date(2019, 5, 8, 21, 00);
    //定时器
    var timer = null;
    timer = setInterval(function () {
    //形参  年,月(一定要注意,月份从0开始,所以设置月份要-1),日,时,分    
        var time = date(2019, 5, 8, 21, 00);
        // 如果返回的小于0,则清除定时器
        if (time <= 0) {
            clearInterval(timer);
            timer = null;
        }
    }, 1000)

}
miaosha();

网页为

           <div class="Interval">
                <h1>活动秒杀</h1>
                <span>FLASH DEALS</span>
                <p>⚡</p>
                <h3>本场距离结束还剩</h3>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

感兴趣的小伙伴可以试试,然后看看代码研究一下,有问题下方评论

上一篇 下一篇

猜你喜欢

热点阅读