JavaScript to achieve JD.com flash sale effect

JavaScript to achieve JD.com flash sale effect

This article shares the specific code of JavaScript to achieve JD.com's flash sale effect for your reference. The specific content is as follows

First, use HTML and CSS to build the framework:

* {
            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>Jingdong flash sale</h3>
        <p>FLASH DEALS</p>
        <i class="iconfont icon-lightningbshandian"></i>
        <p>There are still 10 minutes left in this game</p>
        <div class="time">
            <div class="hour">00</div>
            <div class="minute">00</div>
            <div class="second">00</div>
        </div>
 </div> 

Let's design its logic part:

Get related elements

Define a function to process the difference between two times. Note that if the hours, minutes, and seconds are less than 10, "0" should be added in front to take up space. Finally, return it in the form of an object.

In order to achieve a dynamic effect, we can use setInterval() to put all the acquired hours, minutes and seconds into it, so that it changes every second.

In order to allow users to see the effect as soon as they open it, we can encapsulate the acquired hours, minutes, and seconds into a function and call the function directly in and outside setInterval() to achieve

//1. Get the element to be operated const oHour = document.querySelector(".hour");
const oMinute = document.querySelector(".minute");
const oSecond = document.querySelector(".second");
 
//2. Processing time difference const remDate = new Date("2021-10-28 23:59:59");
 
        setTime(remDate);
 
        //Start the timer setInterval(function() {
            setTime(remDate);
        }, 1000);
 
        //In order to let users see the effect as soon as they come in, instead of three 00s first
        // We can encapsulate it function setTime(remDate) {
            const obj = getDifferTime(remDate);
            // console.log(obj);
 
            //3. Set the difference to the element oHour.innerText = obj.hour;
            oMinute.innerText = obj.minute;
            oSecond.innerText = obj.second;
        }
 
        function getDifferTime(remDate, curDate = new Date()) {
            //1. Get the difference between two times (milliseconds)
            const differTime = remDate - curDate;
 
            //2. Get the difference between two times (seconds)
            const differSecond = differTime / 1000;
 
            //3. Use the total number of seconds of difference / the number of seconds of each day = the number of days of difference let day = Math.floor(differSecond / (60 * 60 * 24));
            day = day >= 10 ? day : "0" + day;
 
            //4. Use the total number of seconds/hours % 24
            let hour = Math.floor(differSecond / (60 * 60) % 24);
            hour = hour >= 10 ? hour : "0" + hour;
 
            //5. Use the total number of seconds/minutes of difference % 60
            let minute = Math.floor(differSecond / 60 % 60);
            minute = minute >= 10 ? minute : "0" + minute;
 
            // 6. Use the total number of seconds of difference % seconds let second = Math.floor(differSecond % 60);
            second = second >= 10 ? second : "0" + second;
 
            return {
                day: day,
                hour: hour,
                minute: minute,
                second: second,
            }
        } 

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JavaScript imitates JD.com's flash sale countdown
  • js realizes the countdown function of JD.com's flash sale
  • JS script to achieve automatic click-through on web pages
  • Javascript implements the countdown for product flash sales (time is synchronized with server time)
  • How to use JS script to realize the automatic flash sale function on web pages
  • Example of using PHP+JS to implement the countdown timer for product flash sales
  • JS implements the countdown function of the mall's flash sale (dynamically set the flash sale time)
  • JS implements the countdown effect of second kill

<<:  Zen Coding Easy and fast HTML writing

>>:  MySQL high availability cluster deployment and failover implementation

Recommend

uni-app WeChat applet authorization login implementation steps

Table of contents 1. Application and configuratio...

Summary of Operator Operations That Are Very Error-Prone in JavaScript

Table of contents Arithmetic operators Abnormal s...

A brief analysis of how to upgrade PHP 5.4 to 5.6 in CentOS 7

1. Check the PHP version after entering the termi...

Vue implements zip file download

This article example shares the specific code of ...

Detailed explanation of the process of zabbix monitoring sqlserver

Let's take a look at zabbix monitoring sqlser...

uniapp project optimization methods and suggestions

Table of contents 1. Encapsulate complex page dat...

About the selection of time date type and string type in MySQL

Table of contents 1. Usage of DATETIME and TIMEST...

How to configure ssh/sftp and set permissions under Linux operating system

Compared with FTP, SSH-based sftp service has bet...

Docker file storage path, modify port mapping operation mode

How to get the container startup command The cont...

A brief discussion on React native APP updates

Table of contents App Update Process Rough flow c...

Understanding and using callback functions in JavaScript

Table of contents Overview What are callbacks or ...

MySQL master-slave principle and configuration details

MySQL master-slave configuration and principle, f...

How to add a certificate to docker

1. Upgrade process: sudo apt-get update Problems ...

How to dynamically modify container port mapping in Docker

Preface: Docker port mapping is often done by map...