Heim Web-Frontend js-Tutorial JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen

JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen

May 16, 2016 pm 04:32 PM
js 倒计时 效果 文字 滚动

Das 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:

Code kopieren Der Code lautet wie folgt:
<html xmlns="http://www.w3.org/1999/xhtml">
<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:

Code kopieren Der Code lautet 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-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

Der Front-End-Codeteil lautet wie folgt:


Code kopieren Der Code lautet wie folgt:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementierung des Text-Scroll-Effekts</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
       function TimeTo(dd) {                                                       document.getElementById('TextBox1').value = dd; //Schließlich wird die feste Formatzeichenfolge mit der ID TextBox1
aktualisiert }
$(function(){

             window['ttt'] = setInterval(aaa,100); // Wird ausgeführt, wenn die Seite geladen wird
});

Funktion stopInterval()

          {
             clearInterval(window['ttt']); //Timer löschen
             window['ttt']="";
            var aa = "Zhang San, Li Si, Wang Wu, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Pu Er";
          var arr = aa.split(',');
          var rdd = 9 * Math.random();
          var leth = Math.round(rdd);
          var leths = arr[leth].toString();
               document.getElementById('TextBox1').value = leths;
}
Funktion aaa() {
            var aa = "Zhang San, Li Si, Wang Wu, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Pu Er";
          var arr = aa.split(',');
          var rdd = 9 * Math.random();
          var leth = Math.round(rdd);
          var leths = arr[leth].toString();
TimeTo(leths)
                                                                                                 
Funktion TimeTo2(){
If(window['ttt']==""){
             window['ttt'] = setInterval(aaa,100);
}
}
</script>
</head>
<body>
<form runat="server">
<input type="text" id="TextBox1"/>
<input type="button" value="Lotterie starten" onClick="TimeTo2();"/>
<input type="button" value="Glückliche Zuschauer bekommen" onClick="stopInterval();"/>
</form>
</body>
</html>


Das endgültige Rendering sieht wie folgt aus:



Wissensergänzung:

var myDate = new Date();

myDate.getYear(); //Das aktuelle Jahr abrufen (2 Ziffern)

myDate.getFullYear(); //Erhalte das vollständige Jahr (4 Ziffern, 1970-????)
myDate.getMonth(); //Den aktuellen Monat abrufen (0-11, 0 steht für Januar)
myDate.getDate(); //Den aktuellen Tag abrufen (1-31)
myDate.getDay(); //Erhalte die aktuelle Woche X (0-6, 0 steht für Sonntag)
myDate.getTime(); //Erhalte die aktuelle Zeit (Anzahl der Millisekunden seit 1970.1.1)
myDate.getHours(); //Erhalte die aktuellen Stunden (0-23)
myDate.getMinutes(); //Erhalten Sie die aktuellen Minuten (0-59)
myDate.getSeconds(); //Erhalte die aktuellen Sekunden (0-59)
myDate.getMilliseconds(); //Erhalte die aktuelle Anzahl an Millisekunden (0-999)
myDate.toLocaleDateString(); //Das aktuelle Datum abrufen
var mytime=myDate.toLocaleTimeString(); //Erhalten Sie die aktuelle Uhrzeit
myDate.toLocaleString( ); //Datum und Uhrzeit abrufen

Ich hoffe, dass dieser Artikel für alle bei der Webprogrammierung auf Basis von js hilfreich sein wird.

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Benutzer stoßen auf seltene Störungen: Bei Samsung Watch-Smartwatches treten plötzlich Probleme mit dem weißen Bildschirm auf Apr 03, 2024 am 08:13 AM

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 So erstellen Sie runde Bilder und Texte in ppt Mar 26, 2024 am 10:23 AM

So erstellen Sie runde Bilder und Texte in ppt

Wie füge ich in Word Punkte zum Text hinzu? Wie füge ich in Word Punkte zum Text hinzu? Mar 19, 2024 pm 08:04 PM

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

Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil Kyushu Fengshen Assassin 4S Kühlertest Luftgekühlter „Assassin Master'-Stil Mar 28, 2024 am 11:11 AM

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

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

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 Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS Dec 17, 2023 pm 06:55 PM

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 Exquisite Licht- und Schattenkunst im Frühling, Haqu H2 ist die kostengünstige Wahl Apr 17, 2024 pm 05:07 PM

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 Test des Vollmodul-Netzteils Huntkey MX750P: 750 W geballte Platin-Stärke Mar 28, 2024 pm 03:20 PM

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

See all articles