Dieser Artikel beschreibt die Methode von JS, um Countdown- und Text -Scrolling -Effekte zu erzielen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Hinweis: Im Allgemeinen werden wir einige Aktivitäten wie das Bieten in einigen Taobao -Läden sehen. Von ihnen finden wir gelegentlich einige Countdown -Effekte. In einigen jährlichen Treffen und anderen Gelegenheiten finden wir auch einige Lotterieaktivitäten und von ihnen können wir auch einige sofortige Scroll -Effekte sehen. Hier werde ich Ihnen eine Möglichkeit teilen, Countdown- und Text -Scrollen zu erreichen, in der Hoffnung, dass es Ihnen hilfreich ist. Dies wird hauptsächlich über JS implementiert.
1. Realisierung des Countdown -Effekts
Der vollständige Code für den Teil der Rezeption lautet wie folgt:
Die Codekopie lautet wie folgt: <html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementierung des Countdown -Effekts </title>
</head>
<body>
<Formular Runat = "Server">
<div id = "Timer"> Berechnung. . . </div>
<script type = "text/javaScript">
var i = 0;
Funktion timeto (dd, nowtstr) {
var t = neues Datum (DD), // die Gesamtzahl der Millisekunden für die angegebene Zeit erhalten
n = (neues Datum (Nowtstr)) - (-100 * i), // Erhalten Sie die aktuelle Anzahl von Millisekunden
c = t - n; // den Zeitunterschied bekommen
if (c <= 0) {// Wenn die Differenz kleiner oder gleich 0 ist, dh es ist abgelaufen oder nur abgelaufen, dann wird das Programm gestartet
document.getElementById ('Timer'). Innerhtml = 'Ereignis ist beendet';
ClearInterval (Fenster ['ttt']); // den Timer löschen
zurückkehren; // Ende der Ausführung
}
var ds = 60 * 60 * 24 * 1000, // Wie viele Millisekunden gibt es an einem Tag
D = ParseInt (C/DS), // Gesamt -Millisekunden geteilt durch Millisekunden eines Tages, um die Anzahl der Tage Differenz zu erhalten
H = ParseInt ((c - d * ds) / (3600 * 1000)), dann nehmen Sie die verbleibenden Millisekunden nach der Anzahl der Tage und teilen
m = parseInt ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), subtrahieren Sie die Millisekunden der Tage und Stunden und dividieren Sie die Millisekunden pro Minute, um die Minuten zu erhalten
s = parseInt ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Erhalten Sie die letzten verbleibenden Millisekunden durch 1000 und sind die Sekunden, und die verbleibenden Millisekunden werden automatisch ignoriert
document.getElementById ('Timer'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> tage <b>' + h + '</b> Stunden <b>' + m + ' // Schließlich wird die Zeichenfolge für das feste Format mit ID -Timer auf das DIV aktualisiert
i ++;
}
(function () {
window ['ttt'] = setInterval (function () {
// var timestr = "< %= endTimestre %>"; // Hier können Sie die Aktivitätsfrist durch den Hintergrund in den Vordergrund übergeben. Beachten Sie, dass es im Format "yyyy-mm-dd" ist
// var nowtstr = "< %= nowTimestre %>"; // In ähnlicher Weise kann die aktuelle Zeit über den Hintergrund an den Vordergrund übergeben werden. Beachten Sie, dass es auch im Format "yyyy-mm-dd" ist
var timestr = "2013-10-21"; // Sie können auch die Frist des "yyyy-mm-dd" -Formates anpassen.
var nowtstr = "2013-08-23"; // Sie können hier auch die aktuelle Zeit des Formats anpassen
if (timestr! = "") {
Timeto (Timestern, nowstr); // Definieren Sie die Phasendifferenzzeit des Countdowns, achten Sie auf das Format
}
}, 100); // Definieren Sie den Timer, berechnen Sie und aktualisieren Sie die Anzeige der DIV alle 100 Millisekunden, dh 1 Sekunde
}) ();
</script>
</form>
</body>
</html>
Ergänzung: Countdown -Effekt Lite Version:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementierung des Countdown -Lite -Effekts </title>
</head>
<body>
<Formular Runat = "Server">
<tabelle>
<tr>
<th id = "tag"> </th>
<th id = "tag2" width = "100"> </th>
<th id = "tag3" width = "100"> </th>
<th id = "tag4" width = "100"> </th>
</tr>
</table>
<script type = "text/javaScript">
Funktion Timestre ()
{
var c = Datum.Parse ("2014-11-11")-Datum.Parse ((neues Datum ()));
if (c <= 0)
{
alarm ('Die Aktivität ist beendet');
ClearInterval (AA); // den Timer löschen
}
var ds = 60 * 60 * 24 * 1000, // Wie viele Millisekunden gibt es an einem Tag
D = ParseInt (C/DS), // Gesamt -Millisekunden geteilt durch Millisekunden eines Tages, um die Anzahl der Tage Differenz zu erhalten
H = ParseInt ((c - d * ds) / (3600 * 1000)), dann nehmen Sie die verbleibenden Millisekunden nach der Anzahl der Tage und teilen
m = parseInt ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), subtrahieren Sie die Millisekunden der Tage und Stunden und dividieren Sie die Millisekunden pro Minute, um die Minuten zu erhalten
s = parseInt ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Erhalten Sie die letzten verbleibenden Millisekunden durch 1000 und sind die Sekunden, und die verbleibenden Millisekunden werden automatisch ignoriert
document.getElementById ('tag'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> Tag </p>';
document.getElementById ('tag2'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + H + '</b> wenn </p>';
document.getElementById ('tag3'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + m + '</b> Punkte </p>'
document.getElementById ('tag4'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + s + '</b> Sekunden </p>'
}
var aa = setInterval (TIMESTR, 1000);
</script>
</form>
</body>
</html>
Schließlich sehen wir den Effekt ähnlich wie in der folgenden Abbildung:
2. Implementierung des Texteeffekts
Der Code -Teil der Rezeption ist wie folgt:
Die Codekopie lautet wie folgt:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementierung des Text -Scrolling -Effekts </title>
<script type = "text/javaScript" src = "jQuery-1.6.2.min.js"> </script>
<script type = "text/javaScript">
Funktion timeto (dd) {
document.getElementById ('textBox1'). value = dd; // Schließlich wird die Zeichenfolge für das feste Format auf das Textfeld mit id textbox1 aktualisiert.
}
$ (function () {
window ['ttt'] = setInterval (aaa, 100); // Führen Sie aus, wenn die Seite geladen wird
});
Funktion stopinterval ()
{
ClearInterval (Fenster ['ttt']); // den Timer löschen
Fenster ['ttt'] = "";
var aa = "Zhang San, Li Si, Wang Wu, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Park er";
var arr = aa.split (',');
var rdd = 9 * math.random ();
var Leaveth = math.round (rdd);
var letters = arr [leth] .ToString ();
document.getElementById ('textBox1'). value = links;
}
Funktion aaa () {
var aa = "Zhang San, Li Si, Wang Wu, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Park er";
var arr = aa.split (',');
var rdd = 9 * math.random ();
var Leaveth = math.round (rdd);
var letters = arr [leth] .ToString ();
Timeto (leths)
}
Funktion timeto2 () {
if (window ['ttt'] == "") {
window ['ttt'] = setInterval (aaa, 100);
}
}
</script>
</head>
<body>
<Formular Runat = "Server">
<Eingabe type = "text" id = "textBox1"/>
<input type = "button" value = "starten Sie die Lotterie" onclick = "timeto2 ();"/>
<Eingabe type = "button" value = "Get Lucky Publikum" onclick = "stopinterval ();"/>
</form>
</body>
</html>
Die endgültigen Renderings sind wie folgt:
Wissensergänzung:
var mydate = new Date ();
mydate.getyear (); // Erhalten Sie das laufende Jahr (2 Ziffern)
mydate.getingfullyear (); // das volle Jahr bekommen (4 Ziffern, 1970-????)
mydate.getMonth (); // Erhalten Sie den aktuellen Monat (0-11, 0 repräsentiert den Januar)
mydate.getDate (); // den aktuellen Tag erhalten (1-31)
mydate.getay (); // Holen Sie sich die aktuelle Woche X (0-6, 0 repräsentiert den Sonntag)
mydate.getTime (); // Die aktuelle Zeit erhalten (Anzahl der Millisekunden ab 1970.1.1)
mydate.gethours (); // Erhalten Sie die aktuelle Anzahl von Stunden (0-23)
mydate.getminutes (); // Erhalten Sie die aktuelle Anzahl von Minuten (0-59)
mydate.getSeconds (); // Erhalten Sie die aktuelle Anzahl von Sekunden (0-59)
mydate.getMilliseconds (); // Erhalten Sie die aktuelle Anzahl von Millisekunden (0-999)
mydate.tolocaledatestring (); // Erhalten Sie das aktuelle Datum
var mytime = mydate.tolocaletimestring (); // Erhalten Sie die aktuelle Zeit
mydate.tolocalestring (); // Datum und Uhrzeit bekommen
Ich hoffe, dieser Artikel wird für die Webprogrammierung aller auf JS hilfreich sein.