Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<html> <body> <h1>Countdown Clock</h1> <ul class="product-countdown" id="countdown"> <li><span class="days">d</span></li> <li><span class="hours">h</span></li> <li><span class="minutes">m</span></li> <li><span class="seconds">s</span></li> </ul> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.product-countdown { z-index: 22; } .product-countdown>li { display: inline-block; margin-right: -4px; } .product-countdown>li+li:before { content: ":"; color: #FFF; background: #30323A; padding: 2px; } .product-countdown>li>span { display: inline-block; color: #FFF; font-weight: 700; padding: 10px; background: #F8694A; }
CSS
Autoformát
CSS reset
Až na konci
function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); initializeClock('countdown', deadline);
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>