{"id":91561,"date":"2022-10-11T23:43:38","date_gmt":"2022-10-12T04:43:38","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-skapar-en-digital-klocka-med-html-css-och-javascript\/"},"modified":"2022-10-11T23:43:38","modified_gmt":"2022-10-12T04:43:38","slug":"hur-man-skapar-en-digital-klocka-med-html-css-och-javascript","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-skapar-en-digital-klocka-med-html-css-och-javascript\/","title":{"rendered":"Hur man skapar en digital klocka med HTML, CSS och JavaScript"},"content":{"rendered":"
\n

Den digitala klockan \u00e4r bland de b\u00e4sta nyb\u00f6rjarprojekten i JavaScript. Det \u00e4r ganska l\u00e4tt att l\u00e4ra sig f\u00f6r m\u00e4nniskor p\u00e5 alla niv\u00e5er.<\/p>\n

I den h\u00e4r artikeln f\u00e5r du l\u00e4ra dig hur du bygger en egen digital klocka med HTML, CSS och JavaScript. Du kommer att f\u00e5 praktisk erfarenhet av olika JavaScript-koncept som att skapa variabler, anv\u00e4nda funktioner, arbeta med datum, komma \u00e5t och l\u00e4gga till egenskaper till DOM och mer.<\/p>\n

L\u00e5t oss b\u00f6rja.<\/p>\n

<\/span> Komponenter i den digitala klockan<\/span><\/h2>\n

Den digitala klockan har fyra delar: timme, minut, sekund och meridiem.<\/p>\n

\n<\/figure>\n

<\/span> Mappstruktur f\u00f6r Digital Clock Project<\/span><\/h2>\n

Skapa en rotmapp som inneh\u00e5ller HTML-, CSS- och JavaScript-filerna. Du kan namnge filerna vad du vill. H\u00e4r heter rotmappen Digital klocka<\/strong>. Enligt standardnamnkonventionen namnges HTML-, CSS- och JavaScript-filerna index.html<\/strong>, styles.css<\/strong>, och script.js<\/strong> respektive.<\/p>\n

\n<\/figure>\n

<\/span> L\u00e4gga till struktur till den digitala klockan med HTML<\/span><\/h2>\n

\u00d6ppna index.html<\/strong> fil och klistra in f\u00f6ljande kod:<\/p>\n

<!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><\/pre>\n
H\u00e4r en div<\/strong> skapas med en id<\/strong> av digital klocka<\/strong>.  Denna div anv\u00e4nds f\u00f6r att visa den digitala klockan med JavaScript. styles.css<\/strong> \u00e4r en extern CSS-sida och \u00e4r l\u00e4nkad till HTML-sidan med hj\u00e4lp av en  <\/l><\/strong>m\u00e4rka.  Liknande, script.js<\/strong> \u00e4r en extern JS-sida och \u00e4r l\u00e4nkad till HTML-sidan med hj\u00e4lp av skript> <\/strong>m\u00e4rka.<\/strong><\/p>\n
<\/span>  L\u00e4gga till funktionalitet till den digitala klockan med hj\u00e4lp av JavaScript<\/span><\/h2>\n
\u00d6ppna script.js<\/strong> fil och klistra in f\u00f6ljande kod:<\/p>\n
function Time() {\/\/ Creating object of the Date classvar date = new Date();\/\/ Get current hourvar hour = date.getHours();\/\/ Get current minutevar minute = date.getMinutes();\/\/ Get current secondvar second = date.getSeconds();\/\/ Variable to store AM \/ PMvar period = \"\";\/\/ Assigning AM \/ PM according to the current hourif (hour >= 12) {period = \"PM\";} else {period = \"AM\";}\/\/ Converting the hour in 12-hour formatif (hour == 0) {hour = 12;} else {if (hour > 12) {hour = hour - 12;}}\/\/ Updating hour, minute, and second\/\/ if they are less than 10hour = update(hour);minute = update(minute);second = update(second);\/\/ Adding time elements to the divdocument.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 10function update\n\n\n\n
<\/span>  F\u00f6rst\u00e5 JavaScript-koden<\/span><\/h2>\n
De Tid()<\/strong> och uppdatering()<\/strong> funktioner anv\u00e4nds f\u00f6r att l\u00e4gga till funktionalitet till den digitala klockan.<\/p>\n
<\/span>F\u00e5 de aktuella tidselementen<\/span><\/h3>\n
F\u00f6r att f\u00e5 aktuellt datum och tid m\u00e5ste du skapa ett Date-objekt.  Det h\u00e4r \u00e4r syntaxen f\u00f6r att skapa ett Date-objekt i JavaScript:<\/p>\n
var date = new Date();<\/pre>\n
Aktuellt datum och tid kommer att lagras i datum<\/strong> variabel.  Nu m\u00e5ste du extrahera aktuell timme, minut och sekund fr\u00e5n datumobjektet.<\/p>\n
date.getHours()<\/strong>, date.getMinutes(),<\/strong> och date.getSeconds()<\/strong> anv\u00e4nds f\u00f6r att h\u00e4mta aktuell timme, minut respektive sekund fr\u00e5n datumobjektet.  Alla tidselement lagras i separata variabler f\u00f6r vidare operationer.<\/p>\n
var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();<\/pre>\n
<\/span>Tilldela aktuell meridiem (AM\/PM)<\/span><\/h3>\n
Eftersom den digitala klockan \u00e4r i ett 12-timmarsformat m\u00e5ste du tilldela l\u00e4mplig meridiem enligt den aktuella timmen.  Om den aktuella timmen \u00e4r st\u00f6rre \u00e4n eller lika med 12, \u00e4r meridiem PM (Post Meridiem) annars \u00e4r det AM (Ante Meridiem).<\/p>\n
var period = \"\";if (hour >= 12) {period = \"PM\";} else {period = \"AM\";}<\/pre>\n
<\/span>Konvertera den aktuella timmen i 12-timmarsformat<\/span><\/h3>\n
Nu m\u00e5ste du konvertera den aktuella timmen till ett 12-timmarsformat.  Om den aktuella timmen \u00e4r 0, uppdateras den aktuella timmen till 12 (enligt 12-timmarsformatet).  Dessutom, om den aktuella timmen \u00e4r st\u00f6rre \u00e4n 12, reduceras den med 12 f\u00f6r att h\u00e5lla den i linje med 12-timmarsformatet.<\/p>\n
if (hour == 0) {hour = 12;} else {if (hour > 12) {hour = hour - 12;}}<\/pre>\n
<\/span>Uppdatering av tidselementen<\/span><\/h3>\n
Du m\u00e5ste uppdatera tidselementen om de \u00e4r mindre \u00e4n 10 (ensiffrigt).  0 l\u00e4ggs till alla ensiffriga tidselement (timme, minut, sekund).<\/p>\n
hour = update(hour);minute = update(minute);second = update(second);function update\n
<\/span>L\u00e4gga till tidselementen till DOM<\/span><\/h3>\n
F\u00f6rst n\u00e5s DOM med hj\u00e4lp av m\u00e5l-div:s id (digital klocka<\/strong>).  Sedan tilldelas tidselementen till div med hj\u00e4lp av innerText<\/strong> setter.<\/p>\n
document.getElementById(\"digital-clock\").innerText = hour + \" : \" + minute + \" : \" + second + \" \" + period;<\/pre>\n
<\/span>Uppdatera klockan varje sekund<\/span><\/h3>\n
Klockan uppdateras varje sekund med hj\u00e4lp av setTimeout()<\/strong> metod i JavaScript.<\/p>\n
setTimeout(Time, 1000);<\/pre>\n
<\/span>  Styla den digitala klockan med CSS<\/span><\/h2>\n
\u00d6ppna styles.css<\/strong> fil och klistra in f\u00f6ljande kod:<\/p>\n
\/* Importing Open Sans Condensed Google font *\/@import url('https:\/\/fonts.googleapis.com\/css2?family=Open+Sans+Condensed:[email\u00a0protected]<\/a>&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);}<\/p><\/pre>\n
Ovanst\u00e5ende CSS anv\u00e4nds f\u00f6r att styla den digitala klockan.  H\u00e4r anv\u00e4nds typsnittet Open Sans Condensed f\u00f6r att visa klockans text.  Det importeras fr\u00e5n Googles teckensnitt med hj\u00e4lp av @importera<\/strong>.  De #digital klocka<\/strong> id-v\u00e4ljare anv\u00e4nds f\u00f6r att v\u00e4lja m\u00e5l-div.  ID-v\u00e4ljaren anv\u00e4nder id<\/strong> attribut f\u00f6r ett HTML-element f\u00f6r att v\u00e4lja ett specifikt element.<\/p>\n
Om du vill ta en titt p\u00e5 den fullst\u00e4ndiga k\u00e4llkoden som anv\u00e4nds i den h\u00e4r artikeln, h\u00e4r \u00e4r GitHub-f\u00f6rvaret.  Dessutom, om du vill ta en titt p\u00e5 liveversionen av detta projekt, kan du kolla in den via GitHub-sidor.<\/p>\n
Notera<\/strong>: Koden som anv\u00e4nds i den h\u00e4r artikeln \u00e4r MIT-licensierad.<\/p>\n
<\/span>  Utveckla andra JavaScript-projekt<\/span><\/h2>\n
Om du \u00e4r nyb\u00f6rjare p\u00e5 JavaScript och vill bli en bra webbutvecklare m\u00e5ste du bygga n\u00e5gra bra JavaScript-baserade projekt.  De kan tillf\u00f6ra v\u00e4rde till ditt CV s\u00e5v\u00e4l som din karri\u00e4r.<\/p>\n
Du kan prova n\u00e5gra projekt som Calculator, ett Hangman-spel, Tic Tac Toe, en JavaScript v\u00e4derapp, en interaktiv landningssida, ett viktkonverteringsverktyg, Rock Paper Scissors, etc.<\/p>\n
Om du letar efter ditt n\u00e4sta JavaScript-baserade projekt \u00e4r en enkel minir\u00e4knare ett utm\u00e4rkt val.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Yuvraj Chandra (80 artiklar publicerade)
<\/strong><\/p>\n
Yuvraj \u00e4r en datavetenskapsstudent vid University of Delhi, Indien.  Han brinner f\u00f6r Full Stack Web Development.  N\u00e4r han inte skriver unders\u00f6ker han djupet i olika teknologier.<\/p>\n
                            Mer fr\u00e5n Yuvraj Chandra<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n