Este artigo descreve o método do JS para obter efeitos de contagem regressiva e rolagem de texto. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Nota: Geralmente, veremos algumas atividades, como licitar em algumas lojas do Taobao. A partir deles, ocasionalmente encontraremos alguns efeitos de contagem regressiva. Em algumas reuniões anuais e outras ocasiões, também encontraremos algumas atividades de loteria e, a partir delas, também podemos ver alguns efeitos de rolagem imediata. Aqui vou compartilhar com você uma maneira de obter contagem regressiva e rolagem de texto, esperando que seja útil para você. Isso é implementado principalmente por meio de JS.
1. Realização do efeito de contagem regressiva
O código completo para a parte da recepção é o seguinte:
A cópia do código é a seguinte: <html xmlns = "http://www.w3.org/1999/xhtml">
<Head Runat = "Server">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementação do efeito de contagem regressiva </title>
</head>
<Body>
<form runat = "server">
<div id = "Timer"> Cálculo. . . </div>
<script type = "text/javascript">
var i = 0;
função timeto (dd, nowtttr) {
var t = nova data (dd), // obtenha o número total de milissegundos para o tempo especificado
n = (nova data (nowtttr)) - (-100 * i), // Obtenha o número atual de milissegundos
c = t - n; // Obtenha a diferença de horário
Se (c <= 0) {// se a diferença for menor ou igual a 0, ou seja, ele expira ou estiver expirado, o programa será lançado
document.getElementById ('Timer'). Innerhtml = 'Evento terminou';
clearInterval (janela ['ttt']); // Limpe o temporizador
retornar; // Execução final
}
var ds = 60 * 60 * 24 * 1000, // quantos milissegundos existem em um dia
d = parseint (c/ds), // milissegundos totais divididos por milissegundos de um dia para obter o número de dias de diferença
h = parseint ((c - d * ds) / (3600 * 1000)), // depois, pegue os milissegundos restantes após o número de dias e divida pelos milissegundos por hora para obter as horas
m = parseint ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // subtraia os milissegundos dos dias e horas e dividem os milissegundos por minuto para obter a ata
s = parseint ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Ter os últimos milissegundos restantes divididos por 1000 e são os segundos, e os milissegundos restantes são automaticamente ignorados
document.getElementById ('Timer'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> dias <b>' + h + '</b> horas <b>' + m + '</b> minutes <b>' + s + '</b> segundos </p'; // Finalmente, a string de formato fixa é atualizada para o DIV com timer de identificação
i ++;
}
(function () {
janela ['ttt'] = setInterval (function () {
// var timeSt = "< %= endtimeSt %>"; // Aqui você pode passar o prazo de atividade para o primeiro plano através do plano de fundo. Observe que está no formato "AAAA-MM-DD"
// var agoratttr = "< %= agoraTimeSt %>"; // Da mesma forma, o horário atual pode ser transmitido para o primeiro plano através do plano de fundo. Observe que também está no formato "AAAA-MM-DD"
var timeSt = "2013-10-21"; // Você também pode personalizar o prazo do formato "AAAA-MM-DD".
var agoratttr = "2013-08-23"; // Você também pode personalizar o horário atual do formato "AAAA-MM-DD" aqui
if (timeST! = "") {
Timeto (timeST, NowStr); // Defina o tempo da diferença de fase da contagem regressiva, preste atenção ao formato
}
}, 100); // Defina o cronômetro, calcule e atualize a exibição da div a cada 100 milissegundos, ou seja, 1 segundo
}) ();
</script>
</morm>
</body>
</html>
Suplemento: Countdown Effect Lite Versão:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementação do efeito contadown Lite </ititle>
</head>
<Body>
<form runat = "server">
<tabela>
<tr>
<th id = "dia"> </th>
<th id = "Day2" width = "100"> </th>
<th id = "Day3" width = "100"> </th>
<th id = "dia4" width = "100"> </th>
</tr>
</tabela>
<script type = "text/javascript">
função timest ()
{
var c = date.parse ("2014-11-11")-date.parse ((new Date ()));
if (c <= 0)
{
alerta ('a atividade terminou');
ClearInterval (AA); // Limpe o temporizador
}
var ds = 60 * 60 * 24 * 1000, // quantos milissegundos existem em um dia
d = parseint (c/ds), // milissegundos totais divididos por milissegundos de um dia para obter o número de dias de diferença
h = parseint ((c - d * ds) / (3600 * 1000)), // depois, pegue os milissegundos restantes após o número de dias e divida pelos milissegundos por hora para obter as horas
m = parseint ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // subtraia os milissegundos dos dias e horas e dividem os milissegundos por minuto para obter a ata
s = parseint ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Ter os últimos milissegundos restantes divididos por 1000 e são os segundos, e os milissegundos restantes são automaticamente ignorados
document.getElementById ('dia'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> dia </p>';
document.getElementById ('Day2'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + h + '</b> quando </p>';
Document.getElementById ('Day3'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + m + '</b> pontos </p>'
document.getElementById ('Day4'). Innerhtml = '<p style = "margin-top: 5px;"> <b>' + s + '</b> segundos </p>'
}
var aa = setInterval (timeST, 1000);
</script>
</morm>
</body>
</html>
Finalmente, podemos ver o efeito semelhante ao mostrado na figura abaixo:
2. Implementação do efeito de rolagem de texto
A parte do código da recepção é a seguinte:
A cópia do código é a seguinte:
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head Runat = "Server">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Implementação do efeito de rolagem de texto </ititle>
<script type = "text/javascript" src = "jQuery-1.6.2.min.js"> </script>
<script type = "text/javascript">
função timeto (dd) {
document.getElementById ('textbox1'). value = dd; // Finalmente, a sequência de formato fixa é atualizada para a caixa de texto com ID TextBox1.
}
$ (function () {
janela ['ttt'] = setInterval (aaa, 100); // executar quando a página está carregando
});
função stopInterval ()
{
clearInterval (janela ['ttt']); // Limpe o temporizador
janela ['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 = esquerdas;
}
função 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 ();
Timeto (Leths)
}
função timeto2 () {
if (janela ['ttt'] == "") {
janela ['ttt'] = setInterval (aaa, 100);
}
}
</script>
</head>
<Body>
<form runat = "server">
<input type = "text" id = "textbox1"/>
<input type = "button" value = "start the lottery" onclick = "timeto2 ();"/>
<input type = "button" value = "Get Lucky Audition" OnClick = "StopInterval ();"/>
</morm>
</body>
</html>
As renderizações finais são as seguintes:
Suplemento de conhecimento:
var mydate = new Date ();
mydate.getyear (); // Obtenha o ano atual (2 dígitos)
mydate.getlyear (); // Obtenha o ano inteiro (4 dígitos, 1970-????)
mydate.getmonth (); // Obtenha o mês atual (0-11, 0 representa janeiro)
mydate.getdate (); // Obtenha o dia atual (1-31)
mydate.getday (); // Obtenha a semana atual x (0-6, 0 representa domingo)
mydate.gettime (); // Obtenha a hora atual (número de milissegundos a partir de 1970.1.1)
mydate.gethours (); // Obtenha o número atual de horas (0-23)
mydate.getminutes (); // Obtenha o número atual de minutos (0-59)
mydate.getSeconds (); // Obtenha o número atual de segundos (0-59)
mydate.getMillisEconds (); // Obtenha o número atual de milissegundos (0-999)
mydate.tolocaledateString (); // Obtenha a data atual
var myTime = mydate.tolocaletimestring (); // Obtenha o horário atual
mydate.tolocalestring (); // Obtenha data e hora
Espero que este artigo seja útil para a programação da Web de todos com base no JS.