Heim  >  Artikel  >  Web-Frontend  >  Implementieren Sie einen zeitlich begrenzten Countdown-Verkauf mit einer Genauigkeit von Millisekunden basierend auf Javascript_Javascript-Kenntnissen

Implementieren Sie einen zeitlich begrenzten Countdown-Verkauf mit einer Genauigkeit von Millisekunden basierend auf Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:05:112149Durchsuche

Dieser Artikel enthält eine Javascript-Implementierung eines Countdowns für einen zeitlich begrenzten Verkauf mit einem auf Millisekunden genauen Countdown als Referenz. Der spezifische Inhalt lautet wie folgt:

1. Renderings

Das Bild unten zeigt die Auswirkung des zeitlich begrenzten Zugriffs auf Juhuasuan

2. Erforderliche Kenntnisse, um den zeitlich begrenzten Effekt zu erzielen: Javascript Date()-Objekt
Date() gibt das aktuelle Datum und Ereignis zurück
getYear() gibt das Jahr zurück. Am besten erhält man das Jahr
getFullYear()-Methode zum Betrieb (vollständiges Format wie 2016)
getMonth() gibt den Monatswert zurück (beginnend bei 0, +1)
getDay() gibt den Wochentag (0-6)
zurück getHours() gibt die Anzahl der Stunden zurück (0-23)
getMinutes() gibt die Anzahl der Minuten zurück (0-59)
getSeconds() gibt die Anzahl der Sekunden
zurück getTime() gibt die Anzahl der Millisekunden zurück
Natürlich verwenden wir möglicherweise nicht unbedingt alle oben genannten Aufrufmethoden. Es hängt auch von Ihren eigenen Anforderungen ab. Gehen wir ohne weiteres direkt zum Code:
1. HTML-Seitencode:
9bca850e23e7d9d5f9fadeb872f69f7794b3e26ee717c64999d7867364b1b4a3
Wir fügen den Countdown-Inhalt in das e388a4556c0f65e1904146cc1a846bee-Tag mit der verbleibenden Unterrichtszeit ein.
2. JS-Skript:

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余:"+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

Das obige js implementiert ein einfaches Beispiel für eine begrenzte Zeiterfassung. Die parseInt()-Methode rundet und getTime() konvertiert die Zeit in Millisekunden. Zusätzlich zur parseInt()-Methode können Sie auch Math.floor verwenden. ) wird durch Abrunden ersetzt.

Denken Sie zum Schluss daran, nicht zu vergessen, ein if() anzugeben, um zu bestimmen, was nach Ablauf der Zeit angezeigt werden muss, da sonst unnötige Fehler auftreten!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn