JavaScript-Timer zur Realisierung einer zeitlich begrenzten Flash-Sale-Funktion

In diesem Artikel wird der spezifische JavaScript-Code zur Implementierung der zeitlich begrenzten Flash-Sale-Funktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Datei index.html

Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="GBK" />
  <title>anzeigen</title>
  <link rel="stylesheet" href="css/index.css" type="text/css" />
  
 </Kopf>
 <Text>
  
  <div Klasse="divMain">
   <img src="img/secondBuyImg.jpg" id="imgMain" />
   <h3 style="color: #FF0000;">Die verbleibende Zeit bis zum Ende des Flash-Sales beträgt:</h3>
   <div id="divZweite">
    
    <div id="divF1" Klasse="divFours">
     <font class="fontdate" size="4" id="font1">00</font>
     <font class="fonttext" size="4">Tag</font>
    </div>
    <div id="divF2" Klasse="divFours">
     <font class="fontdate" size="4" id="font2">00</font>
     <font class="fonttext" size="4">Zeit</font>
    </div>
    <div id="divF3" Klasse="divFours">
     <font class="fontdate" size="4" id="font3">00</font>
     <font class="fonttext" size="4">Minuten</font>
    </div>
    <div id="divF4" class="divFours">
     <font class="fontdate" size="4" id="font4">00</font>
     <font class="fonttext" size="4">Sekunden</font>
    </div>
   </div>
  </div>
  
 </body>
</html>
<script type="text/javascript" src="js/index.js"></script>

Stylesheet-Datei index.css

#imgMain{
 
}
.divMain{/*äußeres div*/
Breite: 100 %;
Höhe: 100%;
 Anzeige: Flex;
 Inhalt ausrichten: links;
 align-items: center;/*befindet sich in der vertikalen Mitte der elastischen Box*/
 flex-direction: column;/*Sortierrichtung der flexiblen Box festlegen*/
}
/* Äußeres Zeit-Div */
#divSekunde{
 Breite: 500px;
 Höhe: 500px;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: Flex-Start;
 Flex-Richtung: Reihe;
}
.divFours{/*Zeit div1-4*/
 Breite: 10%;
 Höhe: 10%;
 Rand: 2px durchgehend rot;
 Anzeige: Flex;
 Flex-Richtung: Reihe;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
}
/* Bild äußeres div */
#divFrist{
 Breite: 20 %;
}
/* Restzeitanzeige */
.fontdate{
 Farbe: dunkelrosa;
}
.fonttext{
 Farbe: dunkelblau;
}

JavaScript-Datei index.js

Funktion torun(str){
 
 var date = neues Datum();
 var systemDay=date.getDate();
 var systemHour=date.getHours();
 var systemMinute=date.getMinutes();
 var systemSecond=date.getSeconds();
 
 var endDate = neues Datum(str);
 var endDay=endDate.getDate();
 var endHour=endDate.getHours();
 var endMinute=endDate.getMinutes();
 var endSecond=endDate.getSeconds();
 
 var verbleibenderTag=-(systemDay-endDay)-1;
 var verbleibende Stunde = - (Systemstunde - Endstunde) -1;
 var verbleibendeMinute=-(systemMinute-endMinute)-1;
 var verbleibendeSecond=(systemSecond-endSecond>=0)?systemSecond-endSecond+59:-(systemSecond-endSecond)-1;
 
 
 console.log("verbleibend"+restlicherTag+"Tag");
 console.log("verbleibend"+verbleibendeStunde+"Stunde");
 console.log("verbleibend"+verbleibendeMinute+"Punkte");
 console.log("verbleibende"+verbleibendeSekunde+"Sekunden");
 
 console.log("aktueller Tag"+Systemtag+"Ende des Tages"+Ende des Tages);
 console.log("Aktuelle Zeit" + systemHour + "Wann es endet" + endHour);
 console.log("aktuelle Minute"+SystemMinute+"Endminute"+EndMinute);
 console.log("aktuelle Sekunde"+SystemSecond+"Ende Sekunde"+EndSecond);
 
 document.getElementById("font1").innerText=restlicherTag+"";
 document.getElementById("font2").innerText=restlicheStunde+"";
 document.getElementById("font3").innerText=restlicheMinute+"";
 document.getElementById("font4").innerText=restlicheSekunde+"";
 
}
var int=setInterval('torun("2020-12-5 23:59:59")',60);

Inhaltsverzeichnis

Wirkung

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: