Este artículo describe el método de JS para lograr los efectos de desplazamiento de la cuenta regresiva y del texto. Compártelo para su referencia. El método de implementación específico es el siguiente:
Nota: En general, veremos algunas actividades como ofertar en algunas tiendas Taobao. De ellos, ocasionalmente encontraremos algunos efectos de cuenta regresiva. En algunas reuniones anuales y otras ocasiones, también encontraremos algunas actividades de lotería, y de ellas, también podemos ver algunos efectos de desplazamiento inmediato. Aquí compartiré con ustedes una forma de lograr la cuenta regresiva y el desplazamiento de texto, con la esperanza de que sea útil para usted. Esto se implementa principalmente a través de JS.
1. Realización del efecto de cuenta regresiva
El código completo para la parte de la recepción es el siguiente:
La copia del código es la siguiente: <html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "servidor">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementación del efecto Countdown </title>
</ablo>
<Body>
<form de runat = "servidor">
<div id = "temporizador"> Cálculo. . . </div>
<script type = "text/javaScript">
var i = 0;
function timeto (dd, nowtstr) {
var t = nueva fecha (DD), // Obtenga el número total de milisegundos para el tiempo especificado
n = (nueva fecha (nowtstr))) - (-100 * i), // Obtenga el número actual de milisegundos
c = t - n; // Obtenga la diferencia de tiempo
if (c <= 0) {// Si la diferencia es menor o igual a 0, es decir, caduca o solo caduca, entonces el programa se lanzará
document.getElementById ('Timer'). InnerHtml = 'Event ha finalizado';
ClearInterval (ventana ['ttt']); // borrar el temporizador
devolver; // Finalización de la ejecución
}
var ds = 60 * 60 * 24 * 1000, // cuántos milisegundos hay en un día
d = parseint (c/ds), // milisegundos totales divididos por milisegundos de un día para obtener la cantidad de días de diferencia
h = parseint ((c - d * ds) / (3600 * 1000)), // luego tome los milisegundos restantes después del número de días y divida por los milisegundos por hora para obtener las horas
m = parseint ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // reste los milisegundos de los días y horas y divide por los milisegundos por minuto para obtener los minutos
s = parseint ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Obtenga los últimos milisegundos restantes divididos por 1000 y son los segundos, y los milisegundos restantes se ignoran automáticamente
document.getElementById ('Timer'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> días <b>' + h + '</b> horas <b>' + m + '</b> minutos <b>' + s + '</b> segundos </p>'; // Finalmente, la cadena de formato fijo se actualiza al Div con el temporizador de ID
i ++;
}
(función () {
ventana ['ttt'] = setInterval (function () {
// var timestr = "< %= endtimatr %>"; // Aquí puede pasar la fecha límite de actividad hasta el primer plano a través del fondo. Tenga en cuenta que está en el formato "yyyy-mm-dd"
// var nowtstr = "< %= nowimestr %>"; // De manera similar, el tiempo actual se puede pasar al primer plano a través del fondo. Tenga en cuenta que también está en el formato "yyyy-mm-dd"
var timestr = "2013-10-21"; // También puede personalizar la fecha límite del formato "A yyyy-MM-DD".
var nowtstr = "2013-08-23"; // También puede personalizar la hora actual del formato "aaa yyyy-mm-dd" aquí
if (timestr! = "") {
Timeto (Timestr, Nowstr); // Definir el tiempo de diferencia de fase de la cuenta regresiva, preste atención al formato
}
}, 100); // Defina el temporizador, calcule y actualice la visualización del DIV cada 100 milisegundos, es decir, 1 segundo
}) ();
</script>
</form>
</body>
</html>
Suplemento: Versión de Lite Effect Countdown:
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementación de Countdown Lite Effect </title>
</ablo>
<Body>
<form de runat = "servidor">
<Table>
<tr>
<th id = "día"> </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">
function timestr ()
{
var c = date.Parse ("2014-11-11")-date.Parse ((nueva fecha ()));
if (c <= 0)
{
alerta ('la actividad ha terminado');
ClearInterval (AA); // Borrar el temporizador
}
var ds = 60 * 60 * 24 * 1000, // cuántos milisegundos hay en un día
d = parseint (c/ds), // milisegundos totales divididos por milisegundos de un día para obtener la cantidad de días de diferencia
h = parseint ((c - d * ds) / (3600 * 1000)), // luego tome los milisegundos restantes después del número de días y divida por los milisegundos por hora para obtener las horas
m = parseint ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // reste los milisegundos de los días y horas y divide por los milisegundos por minuto para obtener los minutos
s = parseint ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Obtenga los últimos milisegundos restantes divididos por 1000 y son los segundos, y los milisegundos restantes se ignoran automáticamente
document.getElementById ('Day'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> day </p>';
document.getElementById ('Day2'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + h + '</b> when </p>';
document.getElementById ('day3'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + m + '</b> puntos </p>'
document.getElementById ('Day4'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + s + '</b> segundos </p>'
}
var aa = setInterval (Timestr, 1000);
</script>
</form>
</body>
</html>
Finalmente podemos ver el efecto similar al que se muestra en la figura a continuación:
2. Implementación del efecto de desplazamiento de texto
La parte del código de recepción es la siguiente:
La copia del código es la siguiente:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "servidor">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementación del efecto de desplazamiento de texto </title>
<script type = "text/javaScript" src = "jQuery-1.6.2.min.js"> </script>
<script type = "text/javaScript">
function timeTo (dd) {
document.getElementById ('textbox1'). valor = dd; // Finalmente, la cadena de formato fijada se actualiza al cuadro de texto con ID TextBox1.
}
$ (function () {
ventana ['ttt'] = setInterval (aaa, 100); // ejecutar cuando la página se está cargando
});
Funcion StopInterval ()
{
ClearInterval (ventana ['ttt']); // borrar el temporizador
ventana ['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 letras = arr [leth] .ToString ();
document.getElementById ('textbox1'). value = lefts;
}
función 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 letras = arr [leth] .ToString ();
Tiempo de tiempo (Leths)
}
function timeto2 () {
if (window ['ttt'] == "") {
ventana ['ttt'] = setInterval (aaa, 100);
}
}
</script>
</ablo>
<Body>
<form de runat = "servidor">
<input type = "text" id = "textbox1"/>
<input type = "button" value = "iniciar la lotería" onClick = "timeto2 ();"/>
<input type = "button" value = "Get Audience" onClick = "stopInterval ();"/>
</form>
</body>
</html>
Las representaciones finales son las siguientes:
Suplemento de conocimiento:
var myDate = new Date ();
mydate.getyear (); // Obtener el año en curso (2 dígitos)
myDate.getblyar (); // Obtenga el año completo (4 dígitos, 1970-????)
myDate.getMonth (); // Obtener el mes actual (0-11, 0 representa enero)
myDate.getDate (); // Obtenga el día actual (1-31)
mydate.getday (); // Obtenga la semana actual X (0-6, 0 representa el domingo)
mydate.gettime (); // Obtenga la hora actual (número de milisegundos a partir de 1970.1.1)
mydate.gethours (); // Obtener el número actual de horas (0-23)
myDate.getMinutes (); // Obtenga el número actual de minutos (0-59)
myDate.getSeconds (); // Obtener el número actual de segundos (0-59)
myDate.getMilliseConds (); // Obtenga el número actual de milisegundos (0-999)
myDate.tolocaledateString (); // Obtener la fecha actual
var myTime = myDate.tOlocaletImEminring (); // Obtenga la hora actual
myDate.tolocalEstring (); // Obtener fecha y hora
Espero que este artículo sea útil para la programación web de todos basada en JS.