Este artigo descreve o efeito do relógio digital da Web Countdown implementado pelo JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
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> relógio de contagem regressiva implementado por JavaScript </ititle>
<estilo>
corpo, div {margem: 0; preenchimento: 0;}
corpo {cor: #ffff; font: 16px/1.5/5fae/8f6f/96c5/9ed1;}
#CountDown {Width: 300px; Text-Align: Center; Background:#1A1A1A; Margem: 10px Auto; Preencidimento: 20px 0;}
entrada {borda: 0; largura: 283px; altura: 50px; cursor: ponteiro; margin-top: 20px; fundo: url (// www.vevb.com/jscss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel {posição de fundo: 0 -50px;}
span {cor:#000; largura: 80px; altura da linha: 2; fundo: #fbfbfb; borda: 2px Solid#B4B4B4; margem: 0 10px; preenchimento: 0 10px;}
</style>
<Cript>
window.onload = function ()
{
var ocountdown = document.getElementById ("contagem regressiva");
var ainput = ocountdown.getElementsByTagName ("input") [0];
Var Timer = NULL;
ainput.OnClick = function ()
{
this.className == ""? (Timer = setInterval (UpdateTime, 1000), UpdateTime ()): (ClearInterval (Timer));
this.className = this.className == ''? "Cancelar": '';
};
Formato da função (a)
{
retornar a.toString (). Substitua (/^(/d) $/, '0 $ 1')
}
função updateTime ()
{
var aspan = ocountdown.getElementsByTagName ("span");
var oremain = aspan [0] .innerhtml.replace (/^0/, '') * 60 + parseint (aspan [1] .innerhtml.replace (/^0/, ''));
if (oremain <= 0)
{
ClearInterval (timer);
Retornar
}
Oremain--;
aspan [0] .innerHtml = formato (parseint (oremain / 60));
oremain %= 60;
aspan [1] .innerhtml = formato (parseint (oremain));
}
}
</script>
</head>
<Body>
<div id = "contagem regressiva">
</span> 01 </span> min <span> 40 </span> segundos
<input type = "button" value = "" />
</div> wulin.com www.vevb.com Efeitos especiais de código
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.