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å alla nivåer.
I den här artikeln får du lära dig hur du bygger en egen digital klocka med HTML, CSS och JavaScript. Du kommer att få 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.
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-filerna. Du kan namnge filerna vad du vill. Här heter rotmappen Digital klocka. Enligt standardnamnkonventionen namnges HTML-, CSS- och JavaScript-filerna index.html, styles.css, och script.js respektive.
Lägga till struktur till den digitala klockan med HTML
Öppna index.html fil och klistra in följande kod:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Digital Clock Using JavaScript </title>
<link rel = "stylesheet" href = "https://www.makeuseof.com/create-a-digital-clock-html-css-javascript/styles.css">
</head>
<body>
<div id = "digital-clock"> </div>
<script src = "https://www.makeuseof.com/create-a-digital-clock-html-css-javascript/script.js"> </script>
</body>
</html>
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
Lägga till funktionalitet till den digitala klockan med hjälp av 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
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 Date-objekt. Det här är syntaxen för att skapa ett Date-objekt i JavaScript:
var date = new Date();
Aktuellt datum och tid kommer att lagras 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 hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
Tilldela aktuell meridiem (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 meridiem PM (Post Meridiem) annars är det AM (Ante Meridiem).
var period = "";
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}
Konvertera den aktuella timmen 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). Dessutom, om den aktuella timmen är större än 12, reduceras den med 12 för att hålla den i linje med 12-timmarsformatet.
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
Uppdatering av tidselementen
Du måste uppdatera tidselementen om de är mindre än 10 (ensiffrigt). 0 läggs till alla ensiffriga tidselement (timme, minut, sekund).
hour = update(hour);
minute = update(minute);
second = update(second);
function update
Lägga till tidselementen till DOM
Först nås DOM med hjälp av mål-div:s id (digital klocka). Sedan tilldelas tidselementen till div med hjälp av innerText setter.
document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;
Uppdatera klockan varje sekund
Klockan uppdateras varje sekund med hjälp av setTimeout() metod i JavaScript.
setTimeout(Time, 1000);
Styla den digitala klockan med CSS
Öppna styles.css fil och klistra in följande kod:
/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:[email protected]&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 styla den digitala klockan. Här används typsnittet Open Sans Condensed för att visa klockans text. Det importeras från Googles teckensnitt med hjälp av @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.
Om du vill ta en titt på den fullständiga källkoden som används i den här artikeln, här är GitHub-förvaret. Dessutom, om du vill ta en titt på liveversionen av detta projekt, kan du kolla in den via 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 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, Rock Paper Scissors, etc.
Om du letar efter ditt nästa JavaScript-baserade projekt är en enkel miniräknare ett utmärkt val.
Om författaren
Yuvraj Chandra (80 artiklar publicerade)
Yuvraj är en datavetenskapsstudent vid University of Delhi, Indien. Han brinner för Full Stack Web Development. När han inte skriver undersöker han djupet i olika teknologier.
Mer från Yuvraj Chandra
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
