Der Schlüssel zur Implementierung dieses Effekts ist die Verwendung von Datumsobjekten und SetTimeout.
Insgesamt gibt es drei Beispiele. Die HTML -Struktur ist wie folgt, sodass kein CSS -Stil hinzugefügt wird.
<body> aktuelle Zeit: <p id = "p1"> </p> College -Aufnahmeprüfung Countdown: <p id = "p2"> </p> begrenzter Zeitrus: <p id = "p3"> </p> </body>
Gehen Sie hauptsächlich die Implementierung von JavaScript verstehen
window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); p3 = document.getElementById ("p3"); showTime1 (); showTime2 (); showTime3 ();}1. Einfache Implementierung der aktuellen Zeitanzeige
Funktion showTime1 () {var nowdate = new Date (); // Erstellen Sie das Datumsobjekt Nowdate, um die aktuelle Zeit zu erhalten var Jahr = nowdate.getingfullyear (), // teenmonat Woche = ["Sonntag", "Montag", "Dienstag", "Donnerstag", "Freitag", "Samstag", h = nowdate.gethours (), m = nowdate.getminutes (), s = nowdate.getSeconds (), H = Checktime (H), // Funktionskontrolle wird für Formatierungszeit verwendet. p1.InnerHtml = Jahr+"Jahr"+Monat+"Monat"+Datum+"Tag"+Woche [Tag]+H+":"+m+":"+s; setTimeout (Showtime1, 1000); // Wiederholen Sie die Funktion selbst}Die CheckTime -Funktion lautet wie folgt:
Funktionsprüfung (i) {if (i <10) {i = "0"+i; } return i;}Da das Zeitformat, das Sie normalerweise sehen, im Allgemeinen 00:00:01 und Gethours, GetMinutes, Get -Sekunden Formate 0 bis 9, nicht 00 bis 09. beträgt.
Zum Beispiel sollte 23:59:59 in der nächsten Sekunde auf 00:00:00 Uhr wechseln. Wenn die CheckTime -Funktion nicht für die Verarbeitung verwendet wird, ändert sich sie auf 0: 0: 0, wodurch das Format ein wenig inkonsistent wird, und es gibt auch visuelle Mutationen bei der Erhöhung oder Verringerung der Wortzahl. (Die nächsten beiden Beispiele verwenden die Funktion CheckTime nicht, um Zeit, Minute und Sekunde zu verarbeiten !!!)
2. Der Countdown -Effekt der College -Aufnahmeprüfung wird realisiert
Funktion showTime2 () {var nowtime = new Date (), // Erhalten Sie die aktuelle Zeit endzeit = neues Datum ("2017/6/6"); // Definieren Sie die Endzeit var linksTime = EndTime.getTime ()-NowTime.getTime (), // Die Millisekunden von der Endzeit links = math. links = math.floor (links/(1000*60*60)%24), // die Anzahl der Stunden links = math.floor (links/(1000*60)%60), // die Anzahl der Minuten links = math.floor (links) (links) (1000%60). setTimeout (Showtime2, 1000); }Unter ihnen die wichtigeren Punkte:
① Definieren Sie die Endzeit Endzeit = neues Datum ("2017/6/6") besteht darin, ein neues Datumsobjekt mit Parametern zu verwenden, und direktes neues Datum () ist es, die aktuelle Zeit direkt zu erhalten.
② Die GetTime () -Methode erhält die Anzahl der Millisekunden ab dem 1. Januar 1970.
③ Berechnung von Tagen, Stunden, Minuten und Sekunden, % (Modulo -Betrieb). Holen Sie sich die Millisekunden (verbleibende Millisekunden) von der Endzeit, dividieren Sie um 1000, um die verbleibenden Sekunden zu erhalten, dividieren Sie um 60, um die verbleibenden Minuten zu erhalten, und teilen Sie sich um 60, um die verbleibenden Stunden zu erhalten. Geteilt durch 24, um die verbleibenden Tage zu bekommen. Die verbleibenden Sekunden links/1000 Modul 60 erhält die Anzahl der Sekunden.
3..
function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"),//Set the end time lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m = math.floor (links/60%60), s = math.floor (links-%60); p3.innerhtml = D+"Tag"+H+"Hour"+M+"Minute"+S+"Second"; setTimeout (Showtime3, 1000); }Tatsächlich ähnelt es dem zweiten Beispiel, der Unterschied besteht darin, dass die Endzeit ein neues Datum festgelegt ist ("2020/1/1,00: 00: 00: 00")).
Unten finden Sie den vollständigen Code
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Countdown-Effekt </title> <script type = "text/javaScript"> Funktionsprüfung (i) {if (i <10) {i = "0"+i; } return i; } window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); showTime1 (); showTime2 (); showTime3 (); } function showTime1 () {var nowdate = new Date (); var yal = nowdate.getingfullyear (), // jahrelangmonat = nowdate.getmonth ()+1, // Month Datum = nowdate.getDate (), // Tag Woche = ["Sonntag", "Montag", "Dienstag", "Donnerstag", "Freitag", "Samstag", Day = nowdate.getday (). m = nowdate.getMinutes (), m = checkTime (m), s = nowdate.getSeconds (), S = CheckTime (s); p1.InnerHtml = Jahr+"Jahr"+Monat+"Monat"+Datum+"Tag"+Woche [Tag]+H+":"+m+":"+s; setTimeout (Showtime1, 1000); } function showTime2 () {var nowtime = new Date (), EndTime = New Datum ("2017/6/6"); var linksTime = endTime.getTime ()-NowTime.getTime (), links = math.floor (links/(1000*60*60*24)), links = math.floor (links/(1000*60*60*60)%24), links = math.floor (links nach links/(1000*60)%60%60), Lefts = Math.floor (links) (links) (links) (links) (links) (links) (links) (links) (links) (links) (links) (links) (links) (links) (1000%60%60%60%60%60%60%60%60%)) p2.innerhtml = links+"Tag"+Lefth+":"+link+":"+links; setTimeout (Showtime2, 1000); } function showtime3() { var nowtime=new Date(), endtime=new Date("2020/1/1,00:00:00"), lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000), d=Math.floor(lefttime/(60*60*24)), h=Math.floor(lefttime/(60*60)%24), m = math.floor (links/60%60), s = math.floor (links-%60); p3.innerhtml = D+"Tag"+H+"Hour"+M+"Minute"+S+"Sekunden"; setTimeout (Showtime3, 1000); } </script> </head> <body> Aktuelle Zeit: <p id = "p1"> </p> College -Aufnahmeprüfung Countdown: <p id = "p2"> </p> begrenzter Zeitrus: <p id = "p3"> </p> </body> </html>Die obige Implementierung von JavaScript -Spezialeffekten - Ein einfaches Beispiel für den aktuellen Zeit- und Countdown -Effekt ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.