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:
|
<<: Zen Coding Easy and fast HTML writing
>>: MySQL high availability cluster deployment and failover implementation
——Notes from "MySQL in Simple Terms (Second ...
Table of contents 1. Install dependencies 2. Conf...
>1 Start the database In the cmd command windo...
The previous article introduced two methods to ch...
1. Overview There are three ways to create a Dock...
The container has already been created, how to kn...
1. Download mysql-8.0.17-winx64 from the official...
Sometimes the input box is small, and you want to...
This article shares the specific code for the WeC...
1. Log in to MySQL and use SHOW VARIABLES LIKE ...
Table of contents 1. Introduction 2. Create a Vit...
Reflections on the two viewpoints of “people-orie...
I searched for many ways to change it online but ...
When we develop a single-page application, someti...
There is a requirement for a list containing mult...