Created
April 9, 2019 00:34
-
-
Save luisenriquecorona/8da30ce48f93321edc180b9edc8ff459 to your computer and use it in GitHub Desktop.
A simple digital clock javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> <!-- This is an HTML5 file --> | |
| <html> <!-- The root element --> | |
| <head> <!-- Title, scripts & styles go here --> | |
| <title>Digital Clock</title> | |
| <script> // A script of js code | |
| // Define a function to display the current time | |
| function displayTime() { | |
| var elt = document.getElementById("clock"); // Find element with id="clock" | |
| var now = new Date(); // Get current time | |
| elt.innerHTML = now.toLocaleTimeString(); // Make elt display it | |
| setTimeout(displayTime, 1000); // Run again in 1 second | |
| } | |
| window.onload = displayTime; // Start displaying the time when document loads. | |
| </script> | |
| <style> /* A CSS stylesheet for the clock */ | |
| #clock { /* Style apply to element with id="clock" */ | |
| font: bold 24pt sans; /* Use a big bold font */ | |
| background: #ddf; /* On a light bluish-gray background */ | |
| padding: 10px; /* Surround it with some space */ | |
| border: solid black 2px; /* And a solid black border */ | |
| border-radius: 10px; /* Round the corners (where supported) */ | |
| } | |
| </style> | |
| </head> | |
| <body> <!-- The body is the displayed parts of the doc. --> | |
| <h1>Digital Clock</h1> <!-- Display a title --> | |
| <span id="clock"></span> <!-- The time gets inserted here --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment