The time-limited flash sale is an online business that greatly reduces the price of the active product within a certain predetermined time. As long as the buyer successfully bids for this product within this time, he can buy the original very expensive item at a super low price. marketing activities. The short-term limitation of time-limited flash kills will give users a stronger sense of urgency and create an atmosphere of "the opportunity is not to be missed, and the time will never come again". At the same time, the limitation in quantity can arouse users' desire to buy.
As a consumer, don’t be impulsive, and don’t be dazzled by the host’s inflammatory language and words such as “limited-time spike”, keep calm when shopping, and avoid impulsive consumption behaviors.
1. Case presentation
The page displays the product image of the seckill and the remaining time of the seckill. The remaining time is decremented every 1 second. When the remaining time is 0, the seckill activity ends. The running effect of the case in the Chrome browser is shown in Figure 8-10.
Figure 8-10 Case effect
2. Case Analysis
In the example, the duration of the seckill activity is 1 minute. After the page is loaded, first calculate the end time of the seckill based on the current system time, then start the timer, subtract the end time from the current time, and convert it into the remaining seconds of the seckill; then determine whether the seckill time has expired, if not, Calculate the remaining seconds; if it has expired, stop the countdown of the seckill. Finally, the remaining time is displayed in the corresponding position in a two-digit format.
3. Case realization
1 <div class="box">
2 <div id="s"></div>
3 </div>
4 <script>
5 var endtime = new Date(), endseconds = endtime.getTime() + 60 * 1000;
6 var s = 0;
7 var id = setInterval(function () {
8 var nowtime = new Date();
9 var remaining = parseInt((endseconds - nowtime.getTime()) / 1000);
10 if (remaining > 0) {
11 s = parseInt(remaining % 60);
12 s = s < 10 ? '0' + s : s;
13 } else {
14 clearInterval(id);
15 s = '00';
16 }
17 document.getElementById('s').innerHTML = '距离本场秒杀结束还剩：'+ s + '秒';
18 }, 1000);
19 </script>
In the above code, the 5th line of code calculates the end time of the seckill based on the current system time; the 7th line of code starts the timer; the 8th-9th line of code subtracts the end time from the current time and converts it into the remaining seconds of the seckill ; Lines 11-12 get the remaining seconds and convert them to two digits. The 14th line of code realizes that when the seckill activity ends, the timer is stopped and the remaining seconds are set to "00"; the 17th line of code displays the remaining seconds in the corresponding position.
Video explanation: JavaScript webpage special effects - time-limited spike_哔哩哔哩_bilibili