Voorbeeld

Kopie script

Select & Copy 
<style> demo{ text-align: center; background: #111; font-family: sans-serif; font-weight: 100; } h1{ color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } #clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 20px; } #clockdiv > div{ padding: 10px; border-radius: 3px; background: #222; display: inline-block; } #clockdiv div > span{ padding: 15px; border-radius: 3px; background: #000; display: inline-block; } smalltext{ padding-top: 5px; font-size: 16px; } </style> <div id="clockdiv"> <div> <span class="days" id="day"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours" id="hour"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes" id="minute"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds" id="second"></span> <div class="smalltext">Seconds</div> </div> </div> <p id="demo"></p> <script> var deadline = new Date("jul 9, 2021 15:37:25").getTime(); var x = setInterval(function() { var now = new Date().getTime(); var t = deadline - now; var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); document.getElementById("day").innerHTML =days ; document.getElementById("hour").innerHTML =hours; document.getElementById("minute").innerHTML = minutes; document.getElementById("second").innerHTML =seconds; if (t < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "TIME UP"; document.getElementById("day").innerHTML ='0'; document.getElementById("hour").innerHTML ='0'; document.getElementById("minute").innerHTML ='0' ; document.getElementById("second").innerHTML = '0'; } }, 1000); </script>