Author: Malte Bublitz
Language/File type: HTML (maybe with nested JavaScript and CSS
Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Countdown</title> <style> @import url(https://xyz.rolltreppe3.de/css/normalize.css); *, *:before, *:after { box-sizing: border-box; } body { font: 20px "Source Sans Pro", sans-serif; background: #F2C45A; color: #8C2318; } main p { width: 300px; margin: 4em auto; font-size: 2em; } footer { position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; } </style> </head> <body> <main> <p id="countdown"></p> </main> <footer> <p><a href="https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/">Build a Countdown Timer in Just 18 Lines of JavaScript - SitePoint</a></p> </footer> <script> const deadline = '2022-07-31'; function getTimeRemaining(endtime){ const total = Date.parse(endtime) - Date.parse(new Date()); const seconds = Math.floor( (total/1000) % 60 ); const minutes = Math.floor( (total/1000/60) % 60 ); const hours = Math.floor( (total/(1000*60*60)) % 24 ); const days = Math.floor( total/(1000*60*60*24) ); return { total, days, hours, minutes, seconds }; } function initializeClock(id, endtime) { const clock = document.getElementById(id); const timeinterval = setInterval(() => { const t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + '<br>' + 'hours: '+ t.hours + '<br>' + 'minutes: ' + t.minutes + '<br>' + 'seconds: ' + t.seconds; if (t.total <= 0) { clearInterval(timeinterval); } },1000); } initializeClock('countdown', deadline); </script> </body> </html> |