Como criar um relógio digital usando HTML, CSS e JavaScript

O Digital Clock está entre os melhores projetos para iniciantes em JavaScript. É muito fácil aprender para pessoas de qualquer nível de habilidade.

Neste artigo, você aprenderá como construir seu próprio relógio digital usando HTML, CSS e JavaScript. Você terá experiência prática com vários conceitos de JavaScript, como criação de variáveis, uso de funções, trabalho com datas, acesso e adição de propriedades ao DOM e muito mais.

Vamos começar.

Componentes do Relógio Digital

O relógio digital tem quatro partes: hora, minuto, segundo e meridiem.

Estrutura da Pasta do Projeto Relógio Digital

Crie uma pasta raiz que contenha os arquivos HTML, CSS e JavaScript. Você pode nomear os arquivos como quiser. Aqui, a pasta raiz é chamada Relógio digital. De acordo com a convenção de nomenclatura padrão, os arquivos HTML, CSS e JavaScript são nomeados index.html, styles.css, e script.js respectivamente.

Adicionando estrutura ao relógio digital usando HTML

Abra o index.html arquivo e cole o seguinte código:

Aqui um div é criado com um eu ia de relógio digital. Este div é usado para exibir o relógio digital usando JavaScript. styles.css é uma página CSS externa e está vinculada à página HTML usando um marcação. De forma similar, script.js é uma página JS externa e está vinculada à página HTML usando o <script> marcação.

Adicionando funcionalidade ao relógio digital usando JavaScript

Abra o script.js arquivo e cole o seguinte código:

function Time () {
// Criando objeto da classe Date
var data = nova data ();
// Obtenha a hora atual
var hora = data.getHours ();
// Obtenha o minuto atual
var minuto = data.getMinutes ();
// Obtenha o segundo atual
var segundo = date.getSeconds ();
// Variável para armazenar AM / PM
período de var = "";
// Atribuindo AM / PM de acordo com a hora atual
if (hora> = 12) {
período = "PM";
} senão {
período = "AM";
}
// Convertendo a hora no formato de 12 horas
if (hora == 0) {
hora = 12;
} senão {
if (hora> 12) {
hora = hora - 12;
}
}
// Atualizando hora, minuto e segundo
// se eles forem menores que 10
hora = atualização (hora);
minuto = atualização (minuto);
segundo = atualização (segundo);
// Adicionando elementos de tempo ao div
document.getElementById ("digital-clock"). innerText = hora + ":" + minuto + ":" + segundo + "" + período;
// Defina o temporizador para 1 seg (1000 ms)
setTimeout (Tempo, 1000);
}
// Função para atualizar os elementos de tempo se eles forem menores que 10
// Anexe 0 antes dos elementos de tempo se eles forem menores que 10
atualização de função (t) {
if (t <10) {
retornar "0" + t;
}
senão {
return t;
}
}
Tempo();

Compreendendo o código JavaScript

O Tempo() e atualizar() funções são usadas para adicionar funcionalidade ao relógio digital.

Obtendo os Elementos da Hora Atual

Para obter a data e hora atuais, você precisa criar um objeto Date. Esta é a sintaxe para criar um objeto Date em JavaScript:

var data = nova data ();

A data e hora atuais serão armazenadas no data variável. Agora você precisa extrair a hora, minuto e segundo atuais do objeto de data.

date.getHours (), date.getMinutes (), e date.getSeconds () são usados ​​para obter a hora, minuto e segundo atuais, respectivamente, do objeto de data. Todos os elementos de tempo são armazenados em variáveis ​​separadas para outras operações.

var hora = data.getHours ();
var minuto = data.getMinutes ();
var segundo = date.getSeconds ();

Atribuindo o Meridiem Atual (AM / PM)

Como o relógio digital está no formato de 12 horas, você precisa atribuir o meridiem apropriado de acordo com a hora atual. Se a hora atual for maior ou igual a 12, o meridiem é PM (Post Meridiem), caso contrário, é AM (Ante Meridiem).

período de var = "";
if (hora> = 12) {
período = "PM";
} senão {
período = "AM";
}

Convertendo a hora atual no formato de 12 horas

Agora você precisa converter a hora atual em um formato de 12 horas. Se a hora atual for 0, a hora atual será atualizada para 12 (de acordo com o formato de 12 horas). Além disso, se a hora atual for maior que 12, ela será reduzida em 12 para mantê-la alinhada com o formato de 12 horas.

Relacionado: Como desativar a seleção de texto, recortar, copiar, colar e clicar com o botão direito em uma página da web

if (hora == 0) {
hora = 12;
} senão {
if (hora> 12) {
hora = hora - 12;
}
}

Atualizando os Elementos de Tempo

Você precisa atualizar os elementos de tempo se eles forem menores que 10 (um dígito). 0 é anexado a todos os elementos de tempo de um único dígito (hora, minuto, segundo).

hora = atualização (hora);
minuto = atualização (minuto);
segundo = atualização (segundo);
atualização de função (t) {
if (t <10) {
retornar "0" + t;
}
senão {
return t;
}
}

Adicionando os Elementos de Tempo ao DOM

Primeiro, o DOM é acessado usando o id do div de destino (relógio digital). Em seguida, os elementos de tempo são atribuídos ao div usando o innerText normatizador.

document.getElementById ("digital-clock"). innerText = hora + ":" + minuto + ":" + segundo + "" + período;

Atualizando o relógio a cada segundo

O relógio é atualizado a cada segundo usando o setTimeout () método em JavaScript.

setTimeout (Tempo, 1000);

Estilizando o relógio digital usando CSS

Abra o styles.css arquivo e cole o seguinte código:

Relacionado: Como usar o box-shadow CSS: truques e exemplos

/ * Importing Open Sans Condensed Google font * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#relógio digital {
cor de fundo: # 66ffff;
largura: 35%;
margem: automático;
padding-top: 50px;
acolchoamento inferior: 50px;
família de fontes: 'Open Sans Condensed', sans-serif;
tamanho da fonte: 64px;
alinhamento de texto: centro;
sombra da caixa: 0 4px 8px 0 rgba (0, 0, 0, 0,2), 0 6px 20px 0 rgba (0, 0, 0, 0,19);
}

O CSS acima é usado para estilizar o Relógio Digital. Aqui, a fonte Open Sans Condensed é usada para exibir o texto do relógio. É importado de fontes do Google usando @importar. O #relógio digital O seletor de id é usado para selecionar o div de destino. O seletor de id usa o eu ia atributo de um elemento HTML para selecionar um elemento específico.

Relacionado: Exemplos de código CSS simples que você pode aprender em 10 minutos

Se você quiser dar uma olhada no código-fonte completo usado neste artigo, aqui está o Repositório GitHub. Além disso, se você quiser dar uma olhada na versão ao vivo deste projeto, você pode conferir através de Páginas GitHub.

Observação: O código usado neste artigo é Licenciado pelo MIT.

Desenvolva outros projetos JavaScript

Se você é um iniciante em JavaScript e quer ser um bom desenvolvedor web, você precisa construir alguns bons projetos baseados em JavaScript. Eles podem agregar valor ao seu currículo e também à sua carreira.

Você pode experimentar alguns projetos como calculadora, um jogo Hangman, Tic Tac Toe, um aplicativo de clima JavaScript, uma página de destino interativa, uma ferramenta de conversão de peso, tesouras de papel de pedra, etc.

Se você está procurando seu próximo projeto baseado em JavaScript, uma calculadora simples é uma escolha excelente.

Como construir uma calculadora simples usando HTML, CSS e JavaScript

O código simples e calculado é o caminho a seguir ao programar. Veja como construir sua própria calculadora em HTML, CSS e JS.

Leia a seguir

Sobre o autor