Solution: How to Create an Analog Clock using JavaScript with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow
We just started, this is our first post hope you find it helpful. Searching over the internet when I found these types to analog clock and it also looks pretty awesome. That’s why I think to share with you guys. More analog clocks are coming to upcoming posts so stay with us.
Live Demo
Also Helpful –
Simple Digital Clock using JavaScript
Responsive Header Navigation Menu
How to Create an Analog Clock using JavaScript
Back to Coding, Here is the short description about creating an analog clock using HTML, CSS & JavaScript with source code. To execute the same program you need to copy those codes, it works fine. If you want to change something and modify yourself then you need to know some function.
Which is setInterval(); for evaluates an expression at specified intervals, setTimeDate(); for sets Calendar’s time with the given Date, getHours(); getMinutes(); getSeconds(); for getting hours minutes seconds. And the last one div.innerHTML for set value to any division.
To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html> <head> <title>JavaScript Analog Clock - Coding Debugging</title> <!-- Just a Cool Font --> <link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- Our Custom CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <svg height="350px" width="350px"> <circle id="a1" cx="50%" cy="50%" r="45%"/> <circle id="a2" cx="50%" cy="50%" r="41%"/> <circle id="a3" cx="50%" cy="50%" r="37%"/> </svg> <span id="tyme"></span> <span id="ampm"></span> <span id="daay"></span> <span id="ddmmyyyy"></span> <!-- Our Custom JS --> <script src="function.js"></script> </body> </html> |
style.css
Create a CSS file named ‘style.css‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
body { background:#222; color:#fff; font-family: 'Varela Round', sans-serif; font-weight:900; margin:0; transition:1s linear; user-select:none; height:100vh; } #tyme{ position:absolute; font-size:3em; padding:2px; padding-left:10px; padding-right:10px; left:50%; transform:translate(-50%); top:3.25em; border-radius:10px; text-shadow:0px 0px 1px black; user-select:none; } svg{ position:absolute; left:50%; transform:translateX(-50%); } circle{ fill:#f50; stroke:#ddd; stroke-width:12; transform-origin:50% 50%; stroke-linecap:round; stroke-dashoffset:300%; transform:rotate(-90deg); transition:1s linear; } #a3{ fill:#222; } span{ text-shadow:0px 0px 1px black; color:#def; } #ampm{ position:absolute; top:14em; left:50%; transform:translate(-50%); text-align:center; } #ddmmyyyy{ position:absolute; left:50%; transform:translate(-50%); top:4.5em; font-size:1.6em; } #daay{ position:absolute; left:50%; transform:translate(-50%); top:2.6em; font-size:1.5em; } footer{ background:#0005; position:fixed; padding:5px; padding-top:10px; bottom:0; width:100%; text-align:center; border-top:solid 1px #aaa; font-family:Courier; font-weight:400; } #follow{ background:#222; color:inherit; padding:3px; padding-left:10px; padding-right:10px; border:solid 1px #777; float:right; text-decoration:none; margin-right:9px; } |
function.js
Create a JavaScript file named ‘function.js‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
var am_pm,dayno; //CALLS DATE PER 0.001S setInterval(mngr,100); //MANAGER function mngr(){ progbar(); setTimeDate(); }; //ONE TIME CALL FOR DATE dt(); //GET DATE TIME PM AM function dt(retrnVal){ dateA= new Date(); a=dateA.getHours(); if (a>12){a-=12; am_pm ="PM";} else{if(a==0){a=12;}; am_pm="AM";}; a=fx(a); b=fx(dateA.getMinutes()); c=fx(dateA.getSeconds()); dayno=dateA.getDay(); day=fx("day"); date=fx(dateA.getDate()); month=fx(dateA.getMonth()+1); year=dateA.getFullYear(); tym=a+":"+b+":"+c; dmy=date+"/"+month+"/"+year; return retrnVal; }; //SMALL FIX FOR DATE function fx(num){ if (num<=9){num="0"+num;}; if (num=="day"){ num=dayno; switch (num){ case 1: num="MON"; break; case 2: num="TUE"; break; case 3: num="WED"; break; case 4: num="THU"; break; case 5: num="FRI"; break; case 6: num="SAT"; break; case 0: num="SUN"; break; }; }; return num; }; //SETS DATE, TIME, DAY function setTimeDate(){ tyme.innerHTML=dt(tym); ampm.innerHTML=am_pm; daay.innerHTML=dt(day); ddmmyyyy.innerHTML =dt(dmy); }; //PROGRESS BAR function progbar(){ a1.style.strokeDasharray=300+(dt(c)/60)*(584-300)+"%"; b = (dt(b)==0) ? 0.01 :dt(b); a2.style.strokeDasharray=300+(b/60)*(556-300)+"%"; a = (dt(a)==12) ? 0.001 :dt(a); a3.style.strokeDasharray=300+(a/12)*(533-300)+"%"; }; //CHANGES BACKGROUND axc=(dt(c)/60)*255; ayc=(dt(c)/60)*127; setInterval(changeColor,100); function changeColor(){ x=lnrGrdnt(); document.body.style="background:"+x+";"; }; function lnrGrdnt(){ axc++; ayc--; if (axc>360){axc=0}; if (ayc<0){ayc=360}; asz="linear-gradient(30deg,hsl("+axc+",100%,40%),hsl("+ayc+",100%,40%))" return asz; }; |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!