Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 15:05:11
Original
2148 Leute haben es durchsucht

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:


Wir fügen den Countdown-Inhalt in das

-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);
});
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!