Este artigo descreve o método de implementação do JavaScript Minute e Second Countdown Timer. Compartilhe para sua referência. A análise específica é a seguinte:
1. Objetivos básicos
Projete um cronômetro de contagem regressiva minuto e segunda no JavaScript e, assim que o tempo é concluído, o botão se tornará sem folha.
O efeito específico é como mostrado na figura abaixo. Para ilustrar o problema, ele é ajustado para pular a mesa a cada 50 milissegundos, ou seja, a cada 0,05.
Quando você estiver realmente usando, basta ajustar o setInterval ("clock.move ()", 50); em window.onload = function () {...} de 50 a 1000.
O botão ainda pode ser clicado antes que o horário acabar.
Depois que o tempo é usado, o botão não pode ser clicado.
2. Processo de produçã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> tempo restante </title>
</head>
<!-a parte html é muito simples. Os botões de texto e envio da linha que precisam ser controlados por JavaScript estão todos escritos com ID->
<Body>
Tempo restante: <span id = "timer"> </span>
<input id = "go" type = "submit" value = "go" />
</body>
</html>
<Cript>
/*A função a ser usada pela função principal, declare -a*/
var clock = new Clock ();
/*Ponteiro para o temporizador*/
Var Timer;
window.onload = function () {
/*A função principal chama apenas o método de movimento na função do relógio uma vez a cada 50 segundos*/
timer = setInterval ("clock.move ()", 50);
}
function clock () {
/*s é uma variável no relógio (), uma variável global que não é um VAR, representando os segundos restantes*/
this.s = 140;
this.move = function () {
/ *Antes da saída, chame a função de troca para converter de segundos a minuto para o segundo, porque a troca não é usada na janela principal da função.onload, portanto, não há necessidade de declará -lo */
document.getElementById ("Timer"). Innerhtml = Exchange (this.s);
/*Toda vez que é chamado, os segundos restantes serão reduzidos por si só*/
this.s = this.s-1;
/*Se o tempo acabar, a janela pop-up torna o botão indisponível, pare de ligar para mover () na função do relógio*/
if (this.s <0) {
alerta ("time está UP");
document.getElementById ("go"). desativado = true;
ClearTimeout (timer);
}
}
}
Função Exchange (tempo) {
/*A divisão de JavaScript é a divisão de ponto flutuante e deve usar o piso Math.
this.m = math.floor (tempo/60);
/*Há uma operação residual*/
this.s = (tempo%60);
this.Text = this.m+"minuto"+this.s+"segundo";
/*Não use isso para o tempo formal do parâmetro passado, enquanto as variáveis restantes usadas nesta função devem usar isso*/
retornar este.Text;
}
</script>
Espero que este artigo seja útil para a programação JavaScript de todos.