lw
programação
locaweb
65
fique interativa: podemos, sem usar
Javascript, criar botões para controlar
o cronômetro. Isso é fácil, basta
modificar o container do HTML para
que o código fique assim:
<input id="iniciar" name="controles"
type="radio" />
<input id="parar" name="controles"
type="radio" />
<input id="zerar" name="controles"
type="radio" />
<div class="timer">
<div class="digito dezseg bseis">
0 1 2 3 4 5</div>
<div class="digito seg bdez">
0 1 2 3 4 5 6 7 8 9</div>
</div>
<div id="timer_controles">
<label for="iniciar">Iniciar</label>
<label for="parar">Parar</label>
<label for="zerar">Zerar</label>
</div>
Agora precisamos alterar o CSS
para exibir corretamente os controles.
Aqui escondemos os radio buttons e
configuramos a fonte dos rótulos:
#timer_controles label {
cursor: pointer;
font-family: arial;
font-size: 14px;
}
input[name="controles"] { display: none; }
E chegou a hora de usar o
recurso do CSS3 que associa o
estado dos botões ao estado
desejado da animação:
#parar:checked~.timer .digito
{ animation-play-state: paused; }
#iniciar:checked~.timer .digito { animation-
play-state: running; }
#zerar:checked~.timer .digito
{ animation: none; }
Quarto passo
// Todo o código
fundamental do cronômetro já foi
implementado, porém há pouca
graça num contador que mede
apenas 60 segundos. Então vamos
ampliar nosso aplicativo, permitindo
que seja possível contar minutos.
Deixaremos como exercício para o
leitor implementar o que falta para
contar as horas.
Precisamos modificar o timer,
acrescentando as linhas referentes aos
minutos. Basta fazer um copy&paste,
mudando apenas o nome da classe. O
HTML fica assim:
<div class="timer">
<div class="digito dezmin bseis">
0 1 2 3 4 5</div>
<div class="digito min bdez">
0 1 2 3 4 5 6 7 8 9</div>
<div class="digito">:</div>
<div class="digito dezseg bseis">
0 1 2 3 4 5</div>
<div class="digito seg bdez">
0 1 2 3 4 5 6 7 8 9</div>
</div>
E a respectiva classe no CSS,
apontando a duração da animação:
.min { animation-duration: 600s; }
.dezmin { animation-duration: 3600s; }
Conclusão
Foi feita só a lógica do cronômetro.
Fica a cargo do leitor não apenas
implementar o que falta, mas
também dar o seu toque de design.
O CSS cresceu muito, commelhorias
impressionantes, que nos deixa
divagando sobre quais serão as
novidades dos próximos anos. Hoje é
possível criar aplicativos com recursos
antes acessíveis apenas a Flash ou
Javascript. Quem sabe, os atuais
designers não passem a merecer mais
um título: programadores da web.
Browser:
cronômetro em
ação pode ser visto
em browsers como
Firefox, Google
Chrome e Safari
1...,55,56,57,58,59,60,61,62,63,64 66,67,68