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

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 de 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.



2 jogadores Android jogos separados telefones

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:





Digital Clock Using JavaScript






Aqui um div é criado com um Eu iria do 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() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = '';
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}
Time();

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 date = new Date();

A data e hora atuais serão armazenadas no encontro 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 hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Atribuindo o meio-dia atual (AM / PM)

Uma vez que 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, então o meridiem é PM (Post Meridiem), caso contrário, é AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = '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 (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 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).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
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 = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Atualizando o relógio a cada segundo

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

setTimeout(Time, 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');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 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 iria 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, 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 em JavaScript, uma página de destino interativa, uma ferramenta de conversão de peso, uma tesoura de papel de pedra, etc.

veja quem está inscrito em você no youtube

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

Compartilhado Compartilhado Tweet O email 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 Tópicos relacionados Sobre o autor Yuvraj Chandra(60 artigos publicados)

Yuvraj é estudante de graduação em Ciência da Computação na Universidade de Delhi, na Índia. Ele é apaixonado por Full Stack Web Development. Quando não está escrevendo, ele está explorando a profundidade de diferentes tecnologias.

Mais de Yuvraj Chandra

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever