Javascript - Simple Digital Clock
Submitted by razormist on Monday, April 2, 2018 - 22:29.
In this tutorial we will create a Simple Digital Clock using Javascript. JavaScript is a scripting or programming language that allows you to implement complex things on web pages. It is widely used in designing a stunning website. It is an interpreted programming language that has a capabilities of Object-Oriented. This code can be used to your system that needed a timestamp. So Let's do the coding.
There you have it we successfully created a Simple Digital Clock using Javascript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!!
Before we started:
First you have to download & install XAMPP or any local server that run PHP scripts. Here's the link for XAMPP server https://www.apachefriends.org/index.html. And this is the link for the bootstrap that has been used for the layout of the calculator https://getbootstrap.com/.The Main Interface
This code contains the interface of the application. This code will render application and display a digital clock. To create this just write these block of code inside the text editor and save this as index.html- <!DOCTYPE html>
- <html lang="en">
- <head>
- <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
- <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
- </head>
- <body>
- <nav class="navbar navbar-default">
- <div class="container-fluid">
- </div>
- </nav>
- <div class="col-md-6 well">
- <hr style="border-top:1px dottec #ccc;">
- <center>
- <div id="myClockDisplay" style="width:80%; font-size:60px; border:10px solid #000;">
- </div>
- </center>
- </div>
- </body>
- <script>
- DisplayTime();
- </script>
- </html>
Creating the Script
This code contains the script of the application. This code will render a digital clock that runs base on you computer clock. To do this just copy write the code as shown below inside the text editor and save it as clock.js- function DisplayTime(){
- var date = new Date();
- var hour = date.getHours();
- var minute = date.getMinutes();
- var seconds = date.getSeconds();
- var day = "AM"
- if(hour == 0){
- hour = 12;
- }
- if(hour > 12){
- hour-=12;
- day = "PM"
- }
- hour = (hour < 10) ? "0" + hour : hour;
- minute = (minute < 10) ? "0" + minute : minute;
- seconds = (seconds < 10) ? "0" + seconds : seconds;
- var currentTime = hour + ":" + minute + ":" + seconds + " " + day;
- document.getElementById("myClockDisplay").innerText = currentTime;
- setInterval(DisplayTime, 1000);
- }
Add new comment
- 598 views