Solution: How to Create a Simple Digital 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
Live Demo
Also Helpful –
Simple Digital Clock using JavaScript
Description
Back to coding, 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 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html> <head> <title>Simple Digital Clock - Coding Debugging</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- My Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body> <form id="all"> <div id="test"></div> <div id="ttt"></div> </form> <!-- JavaScript Page --> <script src="function.js" type="text/javascript"></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 |
#test{ text-align:center; font-family:serif; color:lightslategray; letter-spacing:2px; font-size:70px; text-shadow:5px 3px 25px lightslategray; padding:5px; border:2px lightsalmon; border-radius:30px; } #ttt{ color:lightslategray; text-align:center; padding:5px; border:2px lightsalmon; font-family:serif; border-radius:30px; } #all{ padding:5px; border:5px solid lightsalmon; font-family:serif; border-radius:30px; } |
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 |
window.onload = function(){ printTime(); }; function printTime() { var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); var day = d.getDay(); var date = d.getDate(); var month = d.getMonth(); var year = d.getFullYear(); switch (day){ case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; } if(hours<10){ hours = "0" + hours; } if(mins<10){ mins = "0" + mins; } if(secs<10){ secs = "0" + secs; } month = month + 1; document.getElementById("test").innerHTML = hours+":"+mins+":"+secs; document.getElementById("ttt").innerHTML = day + ", " + date + "/" + month + "/" + year; } setInterval(printTime, 1000); |
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!