Created
November 8, 2017 21:19
-
-
Save kyrias/692e2ca5f19c0960e289d832993e84b9 to your computer and use it in GitHub Desktop.
Simple countdown timer until Mickey Mouse enters the public domain
This file contains 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> | |
| <html> | |
| <head> | |
| <title>Mickey Goes Public</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| .container { | |
| font-size: 2em; | |
| font-weight: bold; | |
| font-family: sans; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .title { | |
| margin: auto; | |
| } | |
| .countdown-container { | |
| display: flex; | |
| flex-direction: row; | |
| margin: auto; | |
| } | |
| .segment { | |
| display: flex; | |
| flex-direction: column; | |
| margin-left: 0.25em; | |
| } | |
| .label { | |
| margin: auto; | |
| font-size: 0.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="title">Mickey goes public in</div> | |
| <div class="countdown-container"> | |
| <div class="segment"><div class="value days"></div><div class="label">Days</div></div> | |
| <div class="segment"><div class="value">:</div></div> | |
| <div class="segment"><div class="value hours"></div><div class="label">Hrs</div></div> | |
| <div class="segment"><div class="value">:</div></div> | |
| <div class="segment"><div class="value minutes"></div><div class="label">Mins</div></div> | |
| <div class="segment"><div class="value">:</div></div> | |
| <div class="segment"><div class="value seconds"></div><div class="label">Secs</div></div> | |
| </div> | |
| </div> | |
| <script> | |
| String.prototype.paddingLeft = function (paddingValue) { | |
| return paddingValue.slice(this.toString().length) + this; | |
| }; | |
| let elems = [ | |
| document.getElementsByClassName("value days")[0], | |
| document.getElementsByClassName("value hours")[0], | |
| document.getElementsByClassName("value minutes")[0], | |
| document.getElementsByClassName("value seconds")[0], | |
| ]; | |
| let enddate = new Date("01-01-2024 00:00:00"); | |
| let second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; | |
| function getRemaining() { | |
| let now = new Date(); | |
| let difference = enddate - now; | |
| let days = Math.floor(difference / day).toString(); | |
| let hours = Math.floor((difference % day) / hour).toString().paddingLeft("00"); | |
| let minutes = Math.floor((difference % hour) / minute).toString().paddingLeft("00"); | |
| let seconds = Math.floor((difference % minute) / second).toString().paddingLeft("00"); | |
| return [days, hours, minutes, seconds]; | |
| } | |
| function updateDisplay() { | |
| let timeSegments = getRemaining(); | |
| for (let segment of timeSegments.entries()) { | |
| elems[segment[0]].innerHTML = segment[1]; | |
| } | |
| } | |
| updateDisplay(); | |
| setInterval(updateDisplay, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment