Hur man skapar en digital klocka med HTML, CSS och JavaScript

Hur man skapar en digital klocka med HTML, CSS och JavaScript

Digital Clock är bland de bästa nybörjarprojekten i JavaScript. Det är ganska lätt att lära sig för människor på alla nivåer.





I den här artikeln lär du dig hur du bygger en egen digital klocka med HTML, CSS och JavaScript. Du får praktisk erfarenhet av olika JavaScript-koncept som att skapa variabler, använda funktioner, arbeta med datum, komma åt och lägga till egenskaper till DOM och mer.



hur mycket är spotify premium -familj

Låt oss börja.





Komponenter i den digitala klockan

Den digitala klockan har fyra delar: timme, minut, sekund och meridiem.

Mappstruktur för projektet Digital Clock

Skapa en rotmapp som innehåller HTML-, CSS- och JavaScript -filerna. Du kan namnge filerna vad du vill. Här heter rotmappen Digital klocka . Enligt standardnamnkonventionen heter HTML-, CSS- och JavaScript -filerna index.html , styles.css , och script.js respektive.



Lägga till struktur till den digitala klockan med hjälp av HTML

Öppna index.html fil och klistra in följande kod:





Digital Clock Using JavaScript






Här en div skapas med en id av digital klocka . Denna div används för att visa den digitala klockan med JavaScript. styles.css är en extern CSS -sida och är länkad till HTML -sidan med hjälp av en märka. Liknande, script.js är en extern JS -sida och är länkad till HTML -sidan med hjälp av < manus> märka.



Lägga till funktionalitet till den digitala klockan med JavaScript

Öppna script.js fil och klistra in följande kod:

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();

Förstå JavaScript -koden

De Tid() och uppdatering() funktioner används för att lägga till funktionalitet till den digitala klockan.



Få aktuella tidselement

För att få aktuellt datum och tid måste du skapa ett datumobjekt. Detta är syntaxen för att skapa ett datumobjekt i JavaScript:

var date = new Date();

Aktuellt datum och tid sparas i datum variabel. Nu måste du extrahera aktuell timme, minut och sekund från datumobjektet.

date.getHours () , date.getMinutes (), och date.getSeconds () används för att få aktuell timme, minut respektive sekund från datumobjektet. Alla tidselement lagras i separata variabler för vidare operationer.

var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

Tilldela den aktuella middagen (AM/PM)

Eftersom den digitala klockan är i ett 12-timmarsformat måste du tilldela lämplig meridiem enligt den aktuella timmen. Om den aktuella timmen är större än eller lika med 12, är meridiemet PM (Post Meridiem) annars är det AM (Ante Meridiem).

var period = '';
if (hour >= 12) {
period = 'PM';
} else {
period = 'AM';
}

Konvertera aktuell timme i 12-timmarsformat

Nu måste du konvertera den aktuella timmen till ett 12-timmarsformat. Om den aktuella timmen är 0, uppdateras den aktuella timmen till 12 (enligt 12-timmarsformatet). Om den aktuella timmen är större än 12 reduceras den med 12 för att hålla den i linje med 12-timmars tidsformatet.

Relaterad: Så här inaktiverar du textmarkering, klippning, kopiering, klistra in och högerklicka på en webbsida

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

Uppdatera tidselementen

Du måste uppdatera tidselementen om de är mindre än 10 (enkelsiffriga). 0 läggs till alla enkelsiffriga tidselement (timme, minut, sekund).

hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t <10) {
return '0' + t;
}
else {
return t;
}
}

Lägga till tidselementen i DOM

Först öppnas DOM med hjälp av mål div -id ( digital klocka ). Därefter tilldelas tidselementen till div med hjälp av innerText setter.

document.getElementById('digital-clock').innerText = hour + ' : ' + minute + ' : ' + second + ' ' + period;

Uppdaterar klockan varannan sekund

Klockan uppdateras varje sekund med setTimeout () metod i JavaScript.

setTimeout(Time, 1000);

Styling av den digitala klockan med hjälp av CSS

Öppna styles.css fil och klistra in följande kod:

Relaterad: Hur man använder CSS box-shadow: tricks och exempel

/* 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);
}

Ovanstående CSS används för att styra den digitala klockan. Här används Open Sans Condensed -teckensnittet för att visa klockans text. Den importeras från Google -teckensnitt med @importera . De #digital klocka id -väljare används för att välja mål div. Id -väljaren använder id attribut för ett HTML -element för att välja ett specifikt element.

Relaterad: Enkla CSS -kodexempel som du kan lära dig på 10 minuter

Om du vill titta på hela källkoden som används i den här artikeln, här är GitHub -förvaret . Om du också vill titta på liveversionen av detta projekt kan du kolla igenom det GitHub -sidor .

Notera : Koden som används i denna artikel är MIT licensierad .

Utveckla andra JavaScript -projekt

Om du är nybörjare på JavaScript och vill bli en bra webbutvecklare måste du bygga några bra JavaScript-baserade projekt. De kan tillföra värde till ditt CV såväl som din karriär.

Du kan prova några projekt som Calculator, ett Hangman -spel, Tic Tac Toe, en JavaScript -väderapp, en interaktiv landningssida, ett viktkonverteringsverktyg, en klipppappersax etc.

vad får din snapchat -poäng att stiga

Om du letar efter ditt nästa JavaScript-baserade projekt är en enkel räknare ett utmärkt val.

Dela med sig Dela med sig Tweet E-post Hur man bygger en enkel räknare med HTML, CSS och JavaScript

Enkel, beräknad kod är vägen att gå när du programmerar. Ta reda på hur du bygger din egen miniräknare i HTML, CSS och JS.

Läs Nästa Relaterade ämnen Om författaren Yuvraj Chandra(60 artiklar publicerade)

Yuvraj är en datavetenskaplig grundstudent vid University of Delhi, Indien. Han brinner för Full Stack webbutveckling. När han inte skriver utforskar han djupet i olika tekniker.

Mer från Yuvraj Chandra

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera