美文网首页
购物倒计时秒杀

购物倒计时秒杀

作者: 凌晨4点的简书 | 来源:发表于2019-06-08 23:51 被阅读0次

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

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>

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

相关文章

  • 江西舜鑫投资管理有限公司提醒:警惕一场“秒杀”引发的骗局

    秒杀”购物热近年来在网上兴起。打开许多购物网站的页面,都会有大量“秒杀”广告不断闪烁,以秒为单位的倒计时器飞速跳跃...

  • 购物倒计时秒杀

    我们在网上购物时,经常看的到活动秒杀的情况,我们自身实现一个来试试 网页为 感兴趣的小伙伴可以试试,然后看看代码研...

  • (转)JS实现活动精确倒计时

    背景 前端页面倒计时功能在很多场景中会用到,如运营活动开始倒计时和活动结束倒计时,又如购物网站的秒杀倒计时,抢购倒...

  • 小程序实现简单的倒计时秒杀效果

    1:小程序实现电商秒杀倒计时效果+样式 wxml: wxss: js 效果如下 2:时分秒倒计时+样式拼团秒杀功能...

  • 倒计时

    ios怎么在cell上添加倒计时 iOS中 简单易懂的秒杀倒计时/倒计时 iOS开发-三种倒计时的写法 iOS实现...

  • jdM站首页

    导航变色方法封装 banner轮播图方法封装 倒计时秒杀方法

  • 如何用js原生方法写出倒计时

    大家在浏览一些购物软件的时候,是不是经常会出现一些限时秒杀的活动呢?其实这里的倒计时 我们是可以用js代码去实现这...

  • 经典面试题,如何设计一个秒杀系统

    说起秒杀,从双十一购物到春节抢红包,再到逢年过节抢⻋票,“秒杀”的场景在我们的生活中处处可⻅。简单来说,秒杀就是在...

  • 淘宝秒杀、京东秒杀、WHU图书馆抢座系统

    淘宝双十一秒杀系统(可提前加入购物车) 淘宝聚划算系统(不可提前得到秒杀地址) 京东秒杀系统 街道口职业技术学院图...

  • 秒杀购物乐趣多

    文/樱夜白 自从上次的618购物节过去之后,我留意到一个很有意思的东西,那就是一元秒杀商品。由于第一次接触吧,感觉...

网友评论

      本文标题:购物倒计时秒杀

      本文链接:https://www.haomeiwen.com/subject/binwxctx.html