用JS怎样写京东秒杀的效果,设计思路和方法是什�

Admin 2022-06-18 群英技术资�

这篇文章给大家分享的是用JS怎样写京东秒杀的效果,设计思路和方法是什么。小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�


本文实例为大家分享了JavaScript实现京东秒杀效果的具体代码,供大家参考,具体内容如下

 

首先先利用html和css搭出架子�

* {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 190px;
            height: 270px;
            color: #fff;
            text-align: center;
            margin: 100px auto;
            background-color: #d00;
            padding-top: 40px;
            box-sizing: border-box;
        }
        
        .box>h3 {
            font-size: 26px;
        }
        
        .box>p:nth-of-type(1) {
            color: rgba(255, 255, 255, .5);
            margin-top: 5px;
        }
        
        .box>i {
            display: inline-block;
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 40px;
        }
        
        .box>.time {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        
        .time>div {
            width: 40px;
            height: 40px;
            background: #333;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            position: relative;
        }
        
        .time>div::before {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background: #d00;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .time>.minute {
            margin: 0 10px;
}
<div class="box">
        <h3>京东秒杀</h3>
        <p>FLASH DEALS</p>
        <i class="iconfont icon-lightningbshandian"></i>
        <p>本场距离结束还剩</p>
        <div class="time">
            <div class="hour">00</div>
            <div class="minute">00</div>
            <div class="second">00</div>
        </div>
 </div>

再来设计其逻辑部分�

获取相关元素

定义一个处理两个时间差的函数,需要注意的是对于小时、分钟、秒钟如果小�10,那么应该在前面添加�0”来占位,最后利用对象的形式将其返回

为了实现其一个动态的效果,我们可以利用setInterval(),将获取到的时分秒全部放入进去,使其每隔一秒就变化一�

为了用户一打开就能看到效果,我们可以将获取到的时分秒封装到一个函数里,在setInterval()里和外直接调用函数即可实�

//1.获取需要操作的元素
const oHour = document.querySelector(".hour");
const oMinute = document.querySelector(".minute");
const oSecond = document.querySelector(".second");
 
//2.处理时间�
 const remDate = new Date("2021-10-28 23:59:59");
 
        setTime(remDate);
 
        //开启定时器
        setInterval(function() {
            setTime(remDate);
        }, 1000);
 
        //为了让用户一进来就看得到效果,而不是先是三�00
        // 我们可以对其进行封装处理
        function setTime(remDate) {
            const obj = getDifferTime(remDate);
            // console.log(obj);
 
            //3.将差值设置给元素
            oHour.innerText = obj.hour;
            oMinute.innerText = obj.minute;
            oSecond.innerText = obj.second;
        }
 
        function getDifferTime(remDate, curDate = new Date()) {
            //1.得到两个时间之间的差值(毫秒�
            const differTime = remDate - curDate;
 
            //2.得到两个时间之间的差值(� �
            const differSecond = differTime / 1000;
 
            //3.利用相差的总秒� / 每一天的秒数 = 相差的天�
            let day = Math.floor(differSecond / (60 * 60 * 24));
            day = day >= 10 ? day : "0" + day;
 
            //4.利用相差的总秒� / 小时 % 24
            let hour = Math.floor(differSecond / (60 * 60) % 24);
            hour = hour >= 10 ? hour : "0" + hour;
 
            //5.利用相差的总秒� / 分钟 % 60
            let minute = Math.floor(differSecond / 60 % 60);
            minute = minute >= 10 ? minute : "0" + minute;
 
            // 6.利用相差的总秒� % 秒数
            let second = Math.floor(differSecond % 60);
            second = second >= 10 ? second : "0" + second;
 
            return {
                day: day,
                hour: hour,
                minute: minute,
                second: second,
            }
        }


到此这篇关于“用JS怎样写京东秒杀的效果,设计思路和方法是什么”的文章就介绍到这了,更多相关用JS怎样写京东秒杀的效果,设计思路和方法是什么内容,欢迎关注群英网络技术资讯频道,小编将为大家输出更多高质量的实用文章�
标签� js京东秒杀

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部