


JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen
May 16, 2016 pm 04:32 PMDas Beispiel in diesem Artikel beschreibt, wie man Countdown- und Text-Scroll-Effekte mit JS implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
Hinweis: Im Allgemeinen werden wir einige Aktivitäten wie das Bieten in einigen Taobao-Läden sehen, von denen wir manchmal einige Countdown-Effekte sehen werden. Bei einigen jährlichen Treffen und anderen Anlässen werden wir auch einige Lotterieaktivitäten finden, von denen wir profitieren können Sehen Sie sich auch einige zufällige Scrolleffekte an. Hier möchte ich Ihnen eine Methode zur Implementierung von Countdown und Text-Scrolling vorstellen. Ich hoffe, dass sie für alle hilfreich sein kann. Dies wird hauptsächlich über js implementiert.
1. Implementierung des Countdown-Effekts
Der vollständige Code des Frontend-Teils lautet wie folgt:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Realisierung des Countdown-Effekts</title>
</head>
<body>
<form runat="server">
<div id="timer">Berechnen. . . </div>
<script type="text/javascript">
var i = 0;
Funktion TimeTo(dd, nowtstr) {
var t = new Date(dd), //Erhalte die Gesamtzahl der Millisekunden in der angegebenen Zeit
n = (new Date(nowtstr)) - (-100 * i), //Erhalte die aktuelle Anzahl an Millisekunden
c = t - n; //Ermitteln Sie den Zeitunterschied
Wenn (c <= 0) {//Wenn die Differenz kleiner oder gleich 0 ist, was bedeutet, dass sie abgelaufen ist oder genau abgelaufen ist, starten Sie das Programm
document.getElementById('timer').innerHTML = 'Aktivität wurde beendet';
Clearinterval (window ['ttt']); // Timer löschen
Return; //Ausführung beenden
}
var ds = 60 * 60 * 24 * 1000, //Wie viele Millisekunden ein Tag hat
d = parseInt(c / ds), // Die gesamten Millisekunden werden durch die Millisekunden eines Tages geteilt, um die Anzahl der Tage Differenz zu erhalten
h = parseInt((c - d * ds) / (3600 * 1000)), // Nehmen Sie dann die verbleibende Anzahl von Millisekunden nach der Anzahl der Tage und dividieren Sie sie durch die Anzahl der Millisekunden pro Stunde, um die Stunde zu erhalten
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //Subtrahieren Sie die verbleibenden Millisekunden von der Anzahl der Tage und Stunden und dividieren Sie sie dann durch die Anzahl der Millisekunden pro Minute, Holen Sie sich Minuten
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //Erhalte die letzten verbleibenden Millisekunden dividiert durch 1000, um die Anzahl der Sekunden zu erhalten, und die verbleibenden Millisekunden werden berechnet automatisch ignoriert. Das war’s
document.getElementById('timer').innerHTML = '<p style="margin-top:5px;" <b>' d '</b>' ;Stunden<b>' m '</b>' s '</b>' //Abschließend wird die feste Formatzeichenfolge in aktualisiert die Div des Timers i ;
}
(Funktion () {
window['ttt'] = setInterval(function () {
// var timestr = "<%=EndTimeStr %>";//Hier können Sie die Aktivitätsfrist über das Backend an das Frontend übergeben. Bitte beachten Sie, dass diese im Format „jjjj-MM-tt“ // var nowtstr = "<%=NowTimeStr %>";//In ähnlicher Weise kann die aktuelle Uhrzeit auch über den Hintergrund an das Frontend übergeben werden. Beachten Sie, dass sie ebenfalls im Format „JJJJ-MM-TT“ vorliegen muss "
var timestr = "2013-10-21";//Sie können die Deadline-Aktivitätszeit auch im Format "JJJJ-MM-TT"
anpassen var nowtstr = "2013-08-23";//Sie können hier auch die aktuelle Uhrzeit im Format "JJJJ-MM-TT" anpassen
If (timestr != "") {
TimeTo(timestr, nowtstr); //Definieren Sie die Countdown-Zeitdifferenz, achten Sie auf das Format
}
}, 100); //Definieren Sie einen Timer, berechnen und aktualisieren Sie die Anzeige von div alle 100 Millisekunden, also 1 Sekunde
})();
</script>
</form>
</body>
</html>
Ergänzung: Lite-Version des Countdown-Effekts:
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Realisierung des Countdown-Lite-Versionseffekts</title>
</head>
<body>
<form runat="server">
<table border="1">
<tr>
<th id="day" width="100"></th>
<th id="day2"width="100"></th>
<th id="day3"width="100"></th>
<th id="day4"width="100"></th>
</tr>
</table>
<script type="text/javascript">
Funktion timestr()
{
var c = Date.parse("2014-11-11")-Date.parse((new Date()));
If(c<=0)
{
alarm('Das Ereignis ist beendet');
clearInterval(aa);//Timer löschen
}
var ds = 60 * 60 * 24 * 1000, //Wie viele Millisekunden pro Tag
d = parseInt(c / ds), // Die gesamten Millisekunden werden durch die Millisekunden eines Tages geteilt, um die Anzahl der Tage Differenz zu erhalten
h = parseInt((c - d * ds) / (3600 * 1000)), // Nehmen Sie dann die verbleibende Anzahl von Millisekunden nach der Anzahl der Tage und dividieren Sie sie durch die Anzahl der Millisekunden pro Stunde, um die Stunde zu erhalten
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), //Subtrahieren Sie die verbleibenden Millisekunden von der Anzahl der Tage und Stunden und dividieren Sie sie dann durch die Anzahl der Millisekunden pro Minute, Holen Sie sich Minuten
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //Erhalte die letzten verbleibenden Millisekunden dividiert durch 1000, um die Anzahl der Sekunden zu erhalten, und die verbleibenden Millisekunden werden berechnet automatisch ignoriert. Das war’s
document.getElementById('day').innerHTML = '<p style="margin-top:5px;">' d '</b>Day </p>';
document.getElementById('day2').innerHTML = '<p style="margin-top:5px;">' h '</b>';
document.getElementById('day3').innerHTML = '<p style="margin-top:5px;">' m '</b>'
document.getElementById('day4').innerHTML = '<p style="margin-top:5px;" <b>' s '</b> seconds</p>'
}
var aa = setInterval(timestr,1000);
</script>
</form>
</body>
</html>
Endlich können wir einen Effekt sehen, der dem Bild unten ähnelt:
2. Implementierung des Text-Scrolling-Effekts

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf

So erstellen Sie runde Bilder und Texte in ppt

Wie füge ich in Word Punkte zum Text hinzu?

Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS

Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl

Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke
