Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="odpocet" cas="20">20 sec odpočet<hr> <script>odpocitej();</script> </div> <div class="odpocet" cas="10">10 sec odpočet<hr> <script>odpocitej();</script> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.odpocet { width:200px; background-color: black; padding:5px; margin:3em auto; color: white; text-align:center; } .odpocet>div { background-color:white; height: 15px; }
CSS
Autoformát
CSS reset
Až na konci
function odpocitej() { // ziskej odkaz na div, ve kterem je element skript var scriptTag = document.getElementsByTagName('script'); scriptTag = scriptTag[scriptTag.length - 1]; var odpocet = scriptTag.parentNode; // vytvor listu a nastav ji sirku 0 var lista = document.createElement('div'); lista.style.width = '0'; odpocet.appendChild(lista); // zjisti cas var cas = odpocet.getAttribute('cas'); var start = Date.now(); // spust casovac po 0.1 sekunde var timer = window.setInterval(function() { // pokud jiz cas vyprsel, zrus casovac var time = Date.now(); if (time - start >= cas * 1000) { window.clearInterval(timer); } // vypocitej sirku v procentech a nastav ji var perc = (time - start) / (cas * 1000) * 100; lista.style.width = Math.min(perc, 100) + "%"; }, 100); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>