Last active
November 17, 2018 22:51
-
-
Save akoskovacs/9825aac94fa2d6bf62780aa5984a6acd to your computer and use it in GitHub Desktop.
Display the current time
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
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <title>What's the time, please?</title> | |
| <script type="text/javascript" charset="utf-8"> | |
| window.onload = function() { | |
| var body_tag = document.getElementsByTagName("body")[0]; | |
| var timer_div = document.getElementById("timer"); | |
| function getRandomColor() { | |
| var hex = '0123456789ABCDEF'; | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++) { | |
| color += hex[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| /* Give a new color just once (F5 to change) */ | |
| // body_tag.style.backgroundColor = getRandomColor(); | |
| function tickTime() { | |
| var time = new Date(); | |
| timer_div.innerHTML = time.toTimeString().split(" ")[0]; | |
| /* Random color each second */ | |
| body_tag.style.backgroundColor = getRandomColor(); | |
| }; | |
| setInterval(tickTime, 1000); | |
| tickTime(); | |
| }; | |
| </script> | |
| <style type="text/css" media="screen"> | |
| body { | |
| background: #ee2244; | |
| text-align: center; | |
| position: relative; | |
| } | |
| #timer { | |
| color: white; | |
| font-size: 25vw; | |
| margin: 0; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="timer"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment