| Line 1: |
Line 1: |
| | __NOTOC__ | | __NOTOC__ |
| − | <p id="demo"></p>
| |
| | | | |
| − | <script> | + | <h1>Countdown Clock</h1> |
| − | // Set the date we're counting down to | + | <div id="clockdiv"> |
| − | var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();
| + | <div> |
| | + | <span class="days"></span> |
| | + | <div class="smalltext">Days</div> |
| | + | </div> |
| | + | <div> |
| | + | <span class="hours"></span> |
| | + | <div class="smalltext">Hours</div> |
| | + | </div> |
| | + | <div> |
| | + | <span class="minutes"></span> |
| | + | <div class="smalltext">Minutes</div> |
| | + | </div> |
| | + | <div> |
| | + | <span class="seconds"></span> |
| | + | <div class="smalltext">Seconds</div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | // Update the count down every 1 second
| |
| − | var x = setInterval(function() {
| |
| − |
| |
| − | // Get todays date and time
| |
| − | var now = new Date().getTime();
| |
| − |
| |
| − | // Find the distance between now and the count down date
| |
| − | var distance = countDownDate - now;
| |
| − |
| |
| − | // Time calculations for days, hours, minutes and seconds
| |
| − | var days = Math.floor(distance / (1000 * 60 * 60 * 24));
| |
| − | var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
| |
| − | var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
| |
| − | var seconds = Math.floor((distance % (1000 * 60)) / 1000);
| |
| − |
| |
| − | // Display the result in the element with id="demo"
| |
| − | document.getElementById("demo").innerHTML = days + "d " + hours + "h "
| |
| − | + minutes + "m " + seconds + "s ";
| |
| − |
| |
| − | // If the count down is finished, write some text
| |
| − | if (distance < 0) {
| |
| − | clearInterval(x);
| |
| − | document.getElementById("demo").innerHTML = "EXPIRED";
| |
| − | }
| |
| − | }, 1000);
| |
| − | </script>
| |
| | | | |
| | {| style="width: 100%; background-color: Thistle; border: 0px solid SlateGray; vertical-align: top;" cellspacing="5" cellpadding="5" | | {| style="width: 100%; background-color: Thistle; border: 0px solid SlateGray; vertical-align: top;" cellspacing="5" cellpadding="5" |