JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

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