Como fazer um relógio digital

Escrito por kevin lee | Traduzido por marcos a. guedes
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um relógio digital
Não é necessário ter um relógio físico para saber as horas (Martin Poole/Photodisc/Getty Images)

Se você não ainda não encontrou um modelo de relógio digital ideal, poderá criar o seu utilizando a linguagem de programação HTA. Com recursos fornecidos pelo Internet Explorer, essa linguagem incorpora toda a capacidade do HTML e JavaScript à sua área de trabalho. Os desenvolvedores podem adicionar relógios digitais a páginas da internet utilizando algumas linhas de JavaScript. No entanto, com a linguagem HTA, é possível fazer modelos personalizados utilizando propriedades de CSS.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o Bloco de Notas e cole a seguinte declaração em seu novo documento:

    <html>

    <head> <title>HTA Test</title>

    <HTA:APPLICATION ID="DigitalClock" APPLICATIONNAME="DigitalClock" > </head>

    <style type="text/css"> .clockStyle {border: thick dotted blue; background-color: #FFFF00; width: 100px; height: 20px; text-align: center; } </style>

    A seção "style" desse código, exibida no fim, define a classe chamada "clockStyle". Essa classe determina a aparência do relógio. Por exemplo, os atributos de borda inserem uma linha de margem pontilhada em azul, em volta do relógio. O plano de fundo é amarelo. Os parâmetros de largura e altura caracterizam a resolução em pixels do objeto.

  2. 2

    Adicione o seguinte bloco JavaScript abaixo do código da etapa anterior:

    <script type="text/javascript" language="javascript">

    var windowWidth = 150; var windowHeight = 100;

    var tickInterval = 1000; var clock; var hours; var minutes; var seconds; var displaySwitch = 9; var delimiter = ":"; var clockBody;

    function startClock(){ var date = new Date(); var time = " "; hours = date.getHours(); minutes = date.getMinutes(); seconds = date.getSeconds();

    if (hours <= displaySwitch) hours = "0" + hours; if (minutes <= displaySwitch) minutes = "0" + minutes; if (seconds <= displaySwitch) seconds = "0" + seconds;

    var currentTime = hours + delimiter + minutes + delimiter + seconds;

    clockBody.innerHTML = currentTime;

    clock = setTimeout("startClock()", tickInterval); } window.onload = function () { window.resizeTo(windowWidth, windowHeight);

    clockBody = document.getElementById("clockBody"); startClock(); } </script>

    Observe as variáveis "windowWidth" e "windowHeight" na parte superior do código. Elas controlarão o tamanho da janela que contém o relógio digital. Altere esses valores da forma que desejar.

  3. 3

    Adicione o seguinte código abaixa do descrito na última seção:

    <body> <div id="clockBody" class="clockStyle"> </div> </body>

    </html>

    Isso criará o elemento "div", ou seja, o corpo do relógio. O atributo de sua classe referencia a declaração de estilo CSS, descrita anteriormente.

  4. 4

    Pressione "Ctrl" e "S" simultaneamente e digite "DigitalClock.hta" no campo "Nome do arquivo" exibido na janela "Salvar como". Clique em "Salvar" para salvar o nome do arquivo.

  5. 5

    Abra o "Windows Explorer" e encontre o arquivo. Dê um clique duplo no arquivo para exibir o relógio digital.

Dicas & Advertências

  • Personalize o relógio alterando as propriedades CSS na seção "style" do documento. Por exemplo, para alterar o plano de fundo para rosa, substitua "yellow", no código, por "pink". Geralmente, os relógios atualizam o display a cada segundo. Para alterar a taxa de atualização, troque "1000", no código, por outro valor, como 2000. Com isso o relógio modificará a cada dois segundos.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível