HTML, 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<style type="text/css"> /* general styling */ div#countdown { background: <?php echo $itemData['color']; ?>; } .container { color: #333; margin: 0 auto; text-align: center; } #countdown h1 { font-weight: normal; letter-spacing: .125rem; text-transform: uppercase; } #countdown li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase; } #countdown li span { display: block; font-size: 4.5rem; } #countdown .message { font-size: 4rem; } #content { display: none; padding: 1rem; } #countdown .emoji { padding: 0 .25rem; } @media all and (max-width: 768px) { #countdown h1 { font-size: 1.5rem; } #countdown li { font-size: 1.125rem; padding: .75rem; } #countdown li span { font-size: 3.375rem; } } </style> <div class="an-slider-shortcode-wrapper"> <div class="container"> <h1 id="headline">Countdown to my birthday:</h1> <div id="countdown"> <ul> <li><span id="days"></span>days</li> <li><span id="hours"></span>Hours</li> <li><span id="minutes"></span>Minutes</li> <li><span id="seconds"></span>Seconds</li> </ul> </div> <div class="message"> <div id="content"> <span class="emoji">🥳</span> <span class="emoji">🎉</span> <span class="emoji">🎂</span> </div> </div> </div> </div> <!-- #shortcode-wrapper --> |
JS/jQuery 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 |
(function() { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; let birthday = "Feb 19, 2023 00:00:00", countDown = new Date(birthday).getTime(), x = setInterval(function() { let now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //do something later when date is reached if (distance < 0) { let headline = document.getElementById("headline"), countdown = document.getElementById("countdown"), content = document.getElementById("content"); // headline.innerText = "كل عام وانتم بخير!"; headline.innerText = an_script_var.message; countdown.style.display = "none"; content.style.display = "block"; clearInterval(x); } //seconds }, 0) }()); |