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

Den digitala klockan är bland de bästa nybörjarprojekten i JavaScript. Det är ganska lätt att lära sig för människor på vilken nivå som helst.

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 i DOM och mer.

Låt oss börja.

Komponenter i den digitala klockan

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

Mappstruktur för Digital Clock Project

Skapa en rotmapp som innehåller HTML-, CSS- och JavaScript-filer. Du kan namnge filerna vad du vill. Här heter rotmappen Digital klocka. Enligt standardnamnkonventionen heter HTML-, CSS- och JavaScript-filer index.html, styles.cssoch 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:

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 a märka. Liknande, script.js är en extern JS-sida och är länkad till HTML-sidan med hjälp av <skript> märka.

Lägga till funktionalitet i den digitala klockan med JavaScript

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

funktionstid () {
// Skapa objekt för datumklassen
var datum = nytt datum ();
// Få aktuell timme
var timme = date.getHours ();
// Få aktuell minut
var minut = date.getMinutes ();
// Få aktuell sekund
var sekund = date.getSeconds ();
// Variabel för att lagra AM / PM
var period = "";
// Tilldela AM / PM enligt aktuell timme
om (timme> = 12) {
period = "PM";
} annat {
period = "AM";
}
// Konvertera timmen i 12-timmarsformat
om (timme == 0) {
timme = 12;
} annat {
om (timme> 12) {
timme = timme - 12;
}
}
// Uppdaterar timme, minut och sekund
// om de är mindre än 10
timme = uppdatering (timme);
minut = uppdatering (minut);
andra = uppdatering (andra);
// Lägga till tidselement till div
document.getElementById ("digital-klocka"). innerText = timme + ":" + minut + ":" + sekund + "" + period;
// Ställ timern till 1 sek (1000 ms)
setTimeout (Time, 1000);
}
// Funktion för att uppdatera tidselement om de är mindre än 10
// Lägg till 0 före tidselement om de är mindre än 10
funktionsuppdatering (t) {
om (t <10) {
returnera "0" + t;
}
annat {
returnera t;
}
}
Tid();

Förstå JavaScript-koden

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

Få de aktuella tidselementen

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

var datum = nytt datum ();

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 hämta aktuell timme, minut respektive sekund från datumobjektet. Alla tidselement lagras i separata variabler för vidare operationer.

var timme = date.getHours ();
var minut = date.getMinutes ();
var sekund = date.getSeconds ();

Tilldela nuvarande Meridiem (AM / PM)

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

var period = "";
om (timme> = 12) {
period = "PM";
} annat {
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 minskas den också med 12 för att hålla den i linje med 12-timmarsformatet.

Relaterad: Hur du inaktiverar textmarkering, klipp ut, kopiera, klistra in och högerklicka på en webbsida

om (timme == 0) {
timme = 12;
} annat {
om (timme> 12) {
timme = timme - 12;
}
}

Uppdaterar tidselementen

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

timme = uppdatering (timme);
minut = uppdatering (minut);
andra = uppdatering (andra);
funktionsuppdatering (t) {
om (t <10) {
returnera "0" + t;
}
annat {
returnera t;
}
}

Lägga till tidselement i DOM

Först nås DOM med hjälp av måldivens ID (digital klocka). Då tilldelas tidselementen till div med hjälp av innerText setter.

document.getElementById ("digital-klocka"). innerText = timme + ":" + minut + ":" + sekund + "" + period;

Uppdaterar klockan varje sekund

Klockan uppdateras varje sekund med hjälp av setTimeout () metod i JavaScript.

setTimeout (Time, 1000);

Styling av den digitala klockan med CSS

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

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

/ * Importera Open Sans Condensed Google-teckensnitt * /
@import url (' https://fonts.googleapis.com/css2?family=Open+Sans+Condensed: wght @ 300 & display = swap ');
#digital klocka {
bakgrundsfärg: # 66ffff;
bredd: 35%;
marginal: auto;
stoppning-topp: 50px;
stoppning-botten: 50px;
font-family: 'Open Sans Condensed', sans-serif;
teckenstorlek: 64 pixlar;
textjustera: centrum;
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 utforma den digitala klockan. Här används teckensnittet Open Sans Condensed för att visa klockans text. Det importeras från Google-teckensnitt med @importera. De #digital klocka ID-väljaren används för att välja måldiv. Id-väljaren använder id attribut för ett HTML-element för att välja ett specifikt element.

Relaterad: Enkla CSS-exempel som du kan lära dig på tio minuter

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

Notera: Koden som används i den här artikeln är MIT licensierad.

Utveckla andra JavaScript-projekt

Om du är nybörjare på JavaScript och vill vara 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 målsida, ett Weight Conversion Tool, Rock Paper Sax, etc.

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

Hur man bygger en enkel kalkylator med HTML, CSS och JavaScript

Enkel, beräknad kod är vägen att gå vid programmering. Kolla hur du bygger din egen kalkylator i HTML, CSS och JS.

Läs Nästa

Om författaren