Cet article décrit la méthode de JS pour réaliser le compte à rebours et les effets de défilement de texte. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Remarque: Généralement, nous verrons certaines activités comme les enchères dans certains magasins Taobao. D'après eux, nous trouverons occasionnellement des effets à rebours. Lors de certaines réunions annuelles et autres occasions, nous trouverons également des activités de loterie, et à partir d'eux, nous pouvons également voir des effets de défilement immédiat. Ici, je partagerai avec vous un moyen de réaliser le compte à rebours et le défilement du texte, en espérant que cela vous sera utile. Ceci est principalement mis en œuvre via JS.
1. Réalisation de l'effet à rebours
Le code complet de la partie de la réception est le suivant:
La copie de code est la suivante: <html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Implémentation de Countdown Effet </TITME>
</ head>
<body>
<form runat = "server">
<div id = "Timer"> Calcul. . . </div>
<script type = "text / javascript">
var i = 0;
Fonction Timeto (dd, nowtstr) {
var t = nouvelle date (dd), // obtient le nombre total de millisecondes pour l'heure spécifiée
n = (nouvelle date (nowTTtr)) - (-100 * i), // Obtenez le nombre actuel de millisecondes
c = t - n; // Obtenez le décalage horaire
Si (c <= 0) {// si la différence est inférieure ou égale à 0, c'est-à-dire qu'elle expire ou est juste expirée, alors le programme sera lancé
document.getElementById ('Timer'). InnerHtml = 'L'événement est terminé';
ClearInterval (fenêtre ['TTT']); // effacer la minuterie
retour; // End Exécution
}
var ds = 60 * 60 * 24 * 1000, // Combien de millisecondes y a-t-il en une journée
d = parseInt (c / ds), // total millisecondes divisé par millisecondes d'un jour pour obtenir le nombre de jours de différence
h = parseInt ((c - d * ds) / (3600 * 1000)), // puis prenez les millisecondes restantes après le nombre de jours et divisez par les millisecondes par heure pour obtenir les heures
m = parseInt ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // soustrayez les millisecondes des jours et des heures et divisez par les millisecondes par minute pour obtenir les minutes
S = parseInt ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Obtenez les dernières millisecondes restantes divisées par 1000 et sont les secondes, et les millisecondes restantes sont automatiquement ignorées
Document.getElementById ('Timer'). InnerHtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> jours <b>' + h + '</b> heures <b>' + m + '</b> minutes <b>' + s + '</b> secondes </p>'; // Enfin, la chaîne de format fixe est mise à jour vers la minuterie Div avec ID
i ++;
}
(fonction () {
fenêtre ['ttt'] = setInterval (function () {
// var timestr = "<% = endtimestr%>"; // Vous pouvez passer la date limite d'activité au premier plan à travers l'arrière-plan. Notez que c'est dans le format "Yyyy-mm-dd"
// var nowtstr = "<% = nowtimestr%>"; // De même, l'heure actuelle peut être transmise au premier plan à travers l'arrière-plan. Notez qu'il est également dans le format "Yyyy-mm-dd"
var timestr = "2013-10-21"; // Vous pouvez également personnaliser la date limite du format "Yyyy-mm-dd".
var nowtstr = "2013-08-23"; // Vous pouvez également personnaliser l'heure actuelle du format "yyyy-mm-dd" ici
if (timestr! = "") {
TIMETO (TIMERST, NOWSTR); // Définissez le temps de compte à rebours de la différence de phase, faites attention au format
}
}, 100); // définir la minuterie, calculer et mettre à jour l'affichage de la div toutes les 100 millisecondes, c'est-à-dire 1 seconde
}) ();
</cript>
</ form>
</docy>
</html>
Supplément: Countdown Effect Lite Version:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Implémentation de Countdown Lite Effect </TITME>
</ head>
<body>
<form runat = "server">
<ballage>
<tr>
<th id = "day"> </ 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">
fonction timestr ()
{
var c = date.parse ("2014-11-11") - date.parse ((new Date ()));
if (c <= 0)
{
alerte («l'activité s'est terminée»);
ClearInterval (aa); // effacer la minuterie
}
var ds = 60 * 60 * 24 * 1000, // Combien de millisecondes y a-t-il en une journée
d = parseInt (c / ds), // total millisecondes divisé par millisecondes d'un jour pour obtenir le nombre de jours de différence
h = parseInt ((c - d * ds) / (3600 * 1000)), // puis prenez les millisecondes restantes après le nombre de jours et divisez par les millisecondes par heure pour obtenir les heures
m = parseInt ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // soustrayez les millisecondes des jours et des heures et divisez par les millisecondes par minute pour obtenir les minutes
S = parseInt ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Obtenez les dernières millisecondes restantes divisées par 1000 et sont les secondes, et les millisecondes restantes sont automatiquement ignorées
document.getElementById ('Day'). InnerHtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> jour </p>';
document.getElementById ('day2'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + h + '</b> quand </p>';
document.getElementById ('day3'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + m + '</b> points </p>'
document.getElementById ('day4'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + s + '</b> secondes </p>'
}
var aa = setInterval (timestr, 1000);
</cript>
</ form>
</docy>
</html>
Enfin, nous pouvons voir l'effet similaire à celui illustré dans la figure ci-dessous:
2. Implémentation de l'effet de défilement de texte
La partie du code de la réception est la suivante:
La copie de code est la suivante:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Implémentation de l'effet de défilement de texte </TITAL>
<script type = "text / javascript" src = "jQuery-1.6.2.min.js"> </ script>
<script type = "text / javascript">
Fonction Timeto (dd) {
document.getElementById ('TextBox1'). Value = dd; // Enfin, la chaîne de format fixe est mise à jour dans la zone de texte avec ID TextBox1.
}
$ (function () {
fenêtre ['TTT'] = setInterval (aaa, 100); // Exécuter lorsque la page se charge
});
fonction stopInterval ()
{
ClearInterval (fenêtre ['TTT']); // effacer la minuterie
fenêtre ['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 lettres = arr [leth] .toString ();
document.getElementById ('TextBox1'). Value = Lefts;
}
fonction 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 lettres = arr [leth] .toString ();
Timeto (leths)
}
fonction Timeto2 () {
if (fenêtre ['ttt'] == "") {
fenêtre ['TTT'] = setInterval (aaa, 100);
}
}
</cript>
</ head>
<body>
<form runat = "server">
<input type = "text" id = "textbox1" />
<input type = "Button" value = "Démarrer la loterie" onclick = "timeto2 ();" />
<entrée type = "bouton" value = "Get Lucky Audience" onClick = "stopInterval ();" />
</ form>
</docy>
</html>
Les rendus finaux sont les suivants:
Supplément de connaissances:
var mydate = new Date ();
mydate.getyear (); // Obtenez l'année en cours (2 chiffres)
myDate.getlyar (); // Obtenez l'année complète (4 chiffres, 1970 - ????)
MyDate.getMonth (); // Obtenez le mois en cours (0-11, 0 représente janvier)
myDate.getDate (); // Obtenez la journée en cours (1-31)
MyDate.getDay (); // Obtenez la semaine en cours X (0-6, 0 représente le dimanche)
myDate.getTime (); // Obtenez l'heure actuelle (nombre de millisecondes à partir de 1970.1.1)
mydate.gethours (); // obtient le nombre actuel d'heures (0-23)
MyDate.getMinutes (); // obtient le nombre actuel de minutes (0-59)
MyDate.getSeconds (); // obtient le nombre actuel de secondes (0-59)
mydate.getMilliseconds (); // obtient le nombre actuel de millisecondes (0-999)
mydate.tolocaledatestring (); // Obtenez la date actuelle
var mytime = mydate.tolocaletimestring (); // Obtenez l'heure actuelle
mydate.tolocalestring (); // Obtenez la date et l'heure
J'espère que cet article sera utile à la programmation Web de chacun basée sur JS.