JavaScript to implement limited time flash sale function

This article shares the specific code of JavaScript to implement the limited-time flash sale function for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div class="box">
   <div id="d"></div> <!-- Remaining days -->
   <div id="h"></div> <!-- Remaining hours -->
   <div id="m"></div> <!-- Remaining minutes -->
   <div id="s"></div> <!-- Remaining seconds -->
  </div>
  <script>
   //Set the end time of the flash sale var endTime = new Date('2021-10-22 18:51:59'), endSeconds = endTime.getTime();
   //Define variables to save the remaining time var d = h = m = s = 0;
   //Set the timer to achieve the limited-time second kill effect var id = setInterval(seckill,1000);
   function seckill(){
    var nowTime = new Date(); //Get the current time //Get the time difference in seconds var remaining = parseInt((endSeconds - nowTime.getTime())/1000);
     if(remaining>0){//Judge whether the flash sale has expired//Calculate the remaining days (divide by 60*60*24 and round up to get the remaining days)
      d = parseInt (remaining / 86400);
      //Calculate the remaining hours (divide by 60*60 to convert to hours, modulo 24 hours to get the remaining hours)
      h = parseInt((remaining / 3600) % 24);
      //Calculate the remaining minutes (divide by 60 to get the minutes, modulo 60 to get the remaining minutes)
      m=parseInt((remaining / 60) % 60);
      //Calculate the remaining seconds (modulo 60 to get the remaining seconds)
      s = parseInt (remaining % 60);
      //Use two digits to represent the remaining days, hours, minutes, and seconds d = d<10 ? '0' + d : d;
      h = h<10 ? '0' + h : h;
      m = m<10 ? '0' + m : m;
      s = s<10 ? '0' + s : s;
     }else{
      clearInterval(id); //Second sale expired, cancel the timer d = h = m = s ='00';
     }
     //Display the remaining days, hours, minutes and seconds to the specified web page document.getElementById('d').innerHTML = d + 'days';
     document.getElementById('h').innerHTML = h + '时';
     document.getElementById('m').innerHTML = m + '分';
     document.getElementById('s').innerHTML = s + 'seconds';
   }
  </script>
 </body>
</html>

Let me share with you a simple example of a limited-time flash sale using JS:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .product{ border: 3px solid orange; display: inline-block; margin-left: 400px; width: 400px; }
        .red{ color: red; font-size: 25px; }
    </style>
</head>
<body>


<div class="product" style="text-align: center;">
    <img src="jquery case-blinds/images/0.jpg" alt="" width="150"/>
    <p>A perfect man</p>
    <span>Original price: <del>9.9 billion</del></span>
    <br/>
    <span>Current price: <span class="red">100 yuan</span></span>
    <br/>
    <span>The sale ends in:</span><span id="time"></span>
</div>


<script>


    var stopTime = new Date(3000,11,14,0,0,0);
    var nowTime = new Date();
    var jianGe = (stopTime-nowTime)/1000;


    var day = Math.floor(jianGe/60/60/24);
    var hour = Math.floor(jianGe/60/60%24);
    var min = Math.floor(jianGe/60%60);
    var sec = Math.floor(jianGe%60);
    var showTime = day+'day'+hour+'hour'+min+'minute'+sec+'second';
    document.getElementById('time').innerText = showTime;


    //Timer: how often a function is executed //setInterval(func,ms)
    var timer = setInterval(function () {


        var nowTime = new Date();
        var jianGe = (stopTime-nowTime)/1000;


        var day = Math.floor(jianGe/60/60/24);
        var hour = Math.floor(jianGe/60/60%24);
        var min = Math.floor(jianGe/60%60);
        var sec = Math.floor(jianGe%60);


        var showTime = day+'day'+hour+'hour'+min+'minute'+sec+'second';


        document.getElementById('time').innerText = showTime;


        if(day==0&&hour==0&&min==0&&sec==0){
            //Turn off the timer clearInterval(timer);
        }


    },1000);

</script>

</body>
</html>

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 data visualization: ECharts map making
Super detailed basic JavaScript syntax rules
Detailed explanation of mandatory and implicit conversion of types in JavaScript
JavaScript implements changing the color of a web page through a slider
Detailed explanation of the differences between var, let and const in JavaScript es6
Detailed explanation of the this pointing problem in JavaScript
JavaScript function call, apply and bind method case study
Detailed explanation of the use of Arguments object in JavaScript
JavaScript CollectGarbage Function Example
Detailed explanation of BOM and DOM in JavaScript
JavaScript setTimeout and setTimeinterval use cases explained
JavaScript timer to achieve limited time flash sale function
JavaScript Objects (details)

<<: Analysis of the principles and usage of Linux hard links and soft links

>>: How to use iostat to view Linux hard disk IO performance