přemejšlel sem, jak bych udělal odpočet času na web (např. 10 vteřin). ZKusil jsem toto:
<SCRIPT>
function Odpocet(){
casovac=window.setTimeout(Odpocet(), 1000);
cas=10;
cas=cas-1;
window.document.getElementById("pocitadlo").innerHTML=cas;
if(cas==0){
clearInterval(casovac);
}
}
Odpocet();
</SCRIPT>
<span id="pocitadlo"></span>
jenomže...nejde :(
Fórum › JavaScript, AJAX, jQuery
Odpočet času
![](img/forum_vlakno_help_vyreseno.png)
1.ÚPLNĚ nejdřív prvek/id/ definuj a potom k němu přistupuj getElementById(id)
2.děláš pořad dokola 10, 10-1,10,10-1....cas=10 musí být před funkcí
3.pozor na syntaxi:
(a) setTimeout("příkaz",1000) / Nebo bez uvozovek: setTimeout(funkce,1000)
(b) clearTimeout (ačkoliv ty clearXXXX se dají klidně zaměnit=dělají totéž....)
Pak to bude funět...
<span id="pocitadlo"></span>
<SCRIPT>
cas=10;
function Odpocet(){
casovac=window.setTimeout(Odpocet(), 1000);
cas=cas-1;
window.document.getElementById("pocitadlo").innerHTML=cas;
if(cas==0){
clearTimeOut(casovac);
}
}
Odpocet();
</SCRIPT>
...tak? :)
UNIVERZAL ODPOCET >> chceš-li po doběhnutí [podtrzene]času: T [/podtrzene] vykonat [podtrzene]akci: AKCE="příkaz(y)"[/podtrzene]
var tim;
function Odpocet(T,AKCE){
window.document.getElementById("pocitadlo").innerHTML=T;
if(T--) {tim=setTimeout(function(){Odpocet(T,AKCE)},1000); return}
tim=null; eval(AKCE);
}
Možno použít vícekrát - různé časy,různé akce: ....... Odpocet(3,"next_image()") ........Odpocet(10,"alert('HOTOVO')")
Možno přerušit odpočet: if (tim) {clearTimeout(tim); ...JINÁ AKCE...} a pak provést jinou akci. (Pokud's to stih')
To Petroff: Jou, menšia provokácia - také univerzálne to až nieje ;-) Chcelo by to doplniť o možnosť definovania miesta, kde sa bude číslo vypisovať alebo napríklad dĺžka kroku...
Páčilo by sa mi to asi takto:
var p = document.getElementById('pocitadlo');
var o = odpocet_start(
10, // pocet casových jednotiek
function() { alert('hotovo'); }, // fcia ktorá sa zavolá nakoniec
function(step, all_steps) // fcia, ktorá sa volá pre každý krok
{
p.innerHTML = '('+step+') '+Math.round(step*100/all_steps)+'%'
},
1000 // dĺžka časovej jednotky
);
// možnosť zrušenia odpočtu
odpocet_stop(o);
Alebo, ešte lepšie, ako object:
var o = new Odpocet( /* podobne ako pred tym */ );
// možné meódy
o->start();
o->stop();
o->pause();
o->restart();
o->status();
...
BTW, window.setInterval() bude časovo presnejšia ako setTimeout().
http://developer.mozilla.org/en/docs/DOM:window.setInterval,
No samozřejmě že setInterval je (jako) stvořená pro počítadla.
Jinak metoda stop by mohla mít (praktické!) varianty:
1.předčasně ukonč + do action
2.předčasně ukonč + skip action
Trochu mi ten seznam metod zavoněl prací s thready
Jestli jsem to pochopil dobře - tak function(step, all_steps) bude (1,10),(2,10).... jo?
Myslím že něco jako tohle byl v Definit.Guide paně Flanagana example: [podtrzene]Animation[/podtrzene]
Tam 1 step prováděla vnitřní funkce která projela seznam dvojic CSSproperty/expression (pomocí eval nastavila grafickému objektu ony vlastnosti) a nakonec připravila místní proměnné na další STEP. Byl to tak jednoduchý případ closure, že jsem ho pochopil i já... ;-)
Myslel som to ako námet, keby sa niekto chystal písať nejaký jednoduchý framework. Keď už metódy na prácu s odpočítavaním, tak poriadne navrhnúť :-)
- áno, časovač by mohol pre každý krok volať užívaťeľom definovanú funkciu a odovzdať jej aktuálny krok a celkový počet krokov. Možno aj referenciu na časovač (samého seba) v prípade funkcionálneho programovania. Alebo ako objekt by ju mohol spúšťať ako vlastnú metódu - aby sa v nej dalo odvolávať na časovač cez referenciu this.Jestli jsem to pochopil dobře - tak function(step, all_steps) bude (1,10),(2,10).... jo?
var tim = (new) Timer( ... );
tim.onstep = function(step, all)
{
if (step == 10) this->stop( true ); // po 10 krokoch volaj stop a (true aby vykonal aj ontimeout)
}
tim.ontimeout = function()
{
// alert('done...');
}
tim.start( 20, 1000 ); // 20 x 1000ms
Tu knihu som nevidel, no počul som že je dobrá. Zatiaľ mi však na všetko vystačil google, takže sa ju ani nechystám zháňať. Predpokladám že šlo o nejaký "časovač", ktorý pre každý krok posunul top,left nejakého objektu a tak dochádzalo k animácii. To isté by sa teda dalo dosiahnuť aj s "naším všeobecným časovačom", keby sa nastavil menší krok (napr40ms) a funkcia onstep by vykonávala posun objektov (animáciu).Myslím že něco jako tohle byl v Definit.Guide paně Flanagana example: Animation
Tam 1 step prováděla vnitřní funkce která projela seznam dvojic CSSproperty/expression (pomocí eval nastavila grafickému objektu ony vlastnosti) a nakonec připravila místní proměnné na další STEP.
Ak mám za seba povedať, eval nemám rád, používam ho fakt len v tých najkrajnejších prípadoch a tu myslím že potrebný nebude. V poslednej dobe prichádzam na to, že sa bez tejto funkcie zaobísť dá.(pomocí eval nastavila grafickému objektu ony vlastnosti)
Knihu nemám a možná se mýlím,určitě: našel jsem to [david flanagan animation] jen source bez návodu. A nejsou tam řetězce, ale funkce =>žádný eval.
/**
* AnimateCSS.js:
* This file defines a function named animateCSS(), which serves as a framework
* for creating CSS-based animations. The arguments to this function are:
*
* element: The HTML element to be animated.
* numFrames: The total number of frames in the animation.
* timePerFrame: The number of milliseconds to display each frame.
* animation: An object that defines the animation; described below.
* whendone: An optional function to call when the animation finishes.
* If specified, this function is passed element as its argument.
*
* The animateCSS() function simply defines an animation framework. It is
* the properties of the animation object that specify the animation to be
* done. Each property should have the same name as a CSS style property. The
* value of each property must be a function that returns values for that
* style property. Each function is passed the frame number and the total
* amount of elapsed time, and it can use these to compute the style value it
* should return for that frame. For example, to animate an image so that it
* slides in from the upper left, you might invoke animateCSS as follows:
*
* animateCSS(image, 25, 50, // Animate image for 25 frames of 50ms each
* { // Set top and left attributes for each frame as follows:
* top: function(frame,time) { return frame*8 + "px"; },
* left: function(frame,time) { return frame*8 + "px"; }
* });
*
**/
function animateCSS(element, numFrames, timePerFrame, animation, whendone) {
var frame = 0; // Store current frame number
var time = 0; // Store total elapsed time
// Arrange to call displayNextFrame() every timePerFrame milliseconds.
// This will display each of the frames of the animation.
var intervalId = setInterval(displayNextFrame, timePerFrame);
// The call to animateCSS() returns now, but the previous line ensures that
// the following nested function will be invoked once for each frame
// of the animation.
function displayNextFrame() {
if (frame >= numFrames) { // First, see if we're done
clearInterval(intervalId); // If so, stop calling ourselves
if (whendone) whendone(element); // Invoke whendone function
return; // And we're finished
}
// Now loop through all properties defined in the animation object
for(var cssprop in animation) {
// For each property, call its animation function, passing the
// frame number and the elapsed time. Use the return value of the
// function as the new value of the corresponding style property
// of the specified element. Use try/catch to ignore any
// exceptions caused by bad return values.
try {
element.style[cssprop] = animation[cssprop](frame, time);
} catch(e) {}
}
frame++; // Increment the frame number
time += timePerFrame; // Increment the elapsed time
}
}
Jop, je to pekný nápad, vytvoriť objekt s metódami pomenovanými menami css vlastností. Každým krokom sa výsledky príslušných metód priradzujú do rovnomenných css vlastností. Je však nutné zvlášť napísať funkciu pre každú vlastnosť, ktorá sa má pri animácii meniť, čo môže byť pri zložitejších animáciách komplikované. Taktiež jednotlivé čiastkové výsledky je nutné počítať stále odznova, takže by som to strčil všetko radšej do jednej funkcie...
Ale máš pravdu, je to presne ten princíp, ktorý som mal na mysli. Krokovať a volať funkcie po každom kroku. Na vykonanie nejakej akcie (zapísanie čísla odpočtu, alebo zmena css vlastnosti)...
super funkce a obyčejný 10 - 9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 - 0 je jak? :)
jen to odběhne, vono to má totiž odpočítat 5 vteřin, za 5 vteřin se to stejně přesměruje jinam..prostě jen odpočet 5 vteřin... :)
Ak nechceš nič vypisovať, stačí ti:
<script type="text/javascript">
window.setTimeout( function(){ window.location = 'presmeruj.jinam.html' } , 5000);
</script>
Ak chceš vypisovať aj tie čísla tak:
<span id="pocitadlo"></span><script type="text/javascript">
var poc = document.getElementById('pocitadlo');
var cakaj = 10; // 10 sekund
var timer = window.setInterval( function() {
poc.innerHTML = cakaj;
if (cakaj==0)
{
clearInterval(timer);
window.location = 'presmeruj.jinam.html';
return;
}
cakaj--;
}, 1000);
</script>
Ak chceš, aby sa počítadlo spúšťalo až pri nejakej udalosti, tak ho musíš celé uzavrieť do nejakej funkcie, ktorú potom zavoláš:
function pocitadlo_run()
{
var poc = document.getElementById('pocitadlo');
var cakaj = 10;
var timer = window.setInterval( function() {
poc.innerHTML = cakaj;
if (cakaj==0)
{
clearInterval(timer);
window.location = 'presmeruj.jinam.html';
return;
}
cakaj--;
}, 1000);
}
Teraz odpočítavanie spustíš zavolaním pocitadlo_run(). Napr. Ak chceš aby sa spustilo po kliknutí na nejaký objekt:
<a href="javascript:pocitadlo_run()">ODPOCITAJ</a>
alebo čistejšie:<a href="stranka-s-oznamenim-ze-nemas-podporu-javascriptu.htm" onclick="pocitadlo_run(); return false">ODPOCITAJ</a>
Alebo, ak chceš, aby sa spustilo hneď po načítaní celej stránky:
<body onload="pocitadlo_run()">
Písal som to narychlo, takže môžu byť chyby.
TADY TO MÁŠ HOTOVÉ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- refreš a kódování meta tagy vložit -->
<title> TEST JS REDIRECT </title>
<style type="text/css">
html {text-align:center}
body {margin: 2em auto; width:500px; font: 111%/2 Verdana sans-serif}
</style>
</head>
<body>
<p>
Sorry! We have moved!
The new URL is: <a id="na_novou" href="http://www.hunlock.com">http://www.hunlock.com</a>
</p>
<p>
You will be redirected to the new address in <span id="pocitadlo">8</span> seconds.
</p>
<script type="text/javascript">
var
nova_URL = document.getElementById("na_novou").href,
stav = window.document.getElementById("pocitadlo");
/************************************************** Při vypnutém JS bude jen obyč.text */
stav.style.color="red";
stav.style.fontWeight="bold";
stav.style.fontSize="larger";
/* přeplácané!
stav.style.border="1px solid black"; stav.style.padding="1px 3px";
*/
/************************************************** Konec stylů pro počítadlo */
function Odpocet(){
if(--stav.innerHTML) setTimeout(Odpocet,1000);
else window.location.replace(nova_URL);
}
Odpocet(); /* Doba odpočtu je rovna hodnotě vložené do SPANu ^^^^ */
</script>
</body>
</html>
- v InternetExploreru by se bez DOCTYPE STRICT deklarace nezobrazil text správně
- chybí 2x META tagy: kódování pro případnou češtinu a redirect pro uživatele bez JS:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="8; url=http://www.hunlock.com">
Takže se pak zadává celkem: čas 2x , adresa 3x
~petr~
Správně má při přesměrování nová adresa nahradit v historii okna/tabu tu původní položku.
Tento kód to dělá správně i při použití odkazu (=ruční volby).
Takže tahle verze platí (....gatí):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- refreš a kódování meta tagy vložit -->
<title> TEST JS REDIRECT </title>
<style type="text/css">
html {text-align:center}
body {margin: 2em auto; width:500px; font: 111%/2 Verdana sans-serif}
</style>
</head>
<body>
<p>
Sorry! We have moved!
The new URL is: <a id="na_novou" href="http://www.hunlock.com">http://www.hunlock.com</a>
</p>
<p>
You will be redirected to the new address in <span id="pocitadlo">8</span> seconds.
</p>
<script type="text/javascript">
var
stav = window.document.getElementById("pocitadlo"),
nova = document.getElementById("na_novou");
nova.onclick = function(){window.location.replace(this.href);return false};
/******************************************************************/
stav.style.color="red";
stav.style.fontWeight="bold";
stav.style.fontSize="larger";
/************************************************* Konec stylů pro počítadlo */
function Odpocet(){
if(--stav.innerHTML) setTimeout(Odpocet,1000);
else nova.onclick();
}
Odpocet(); /* Doba odpočtu je rovna hodnotě vložené do SPANu ^^^^ */
</script>
</body>
</html>
Kdyby coko nefun tak je to ňáký překlep (dělal v qaltu) => oznam thx pocho °petr°
<to Prog.>
Obecnější dotaz: Nedala by se stránka (tj.+všechny připojené soubory) načítat v době "POČÍTÁNÍ", takže by se pak zobrazila náhle,bez prodlevy?
(Říká se tomu preloader pokud je tato úprava součástí stránky; ale já mám na mysli, jestli by to nešlo s libovolnou=neupravovanou stránkou.
Vlastně by šlo jen o to, dostat ty soubory do cache . . . .nebo se pletu ???)
To Petroff: Teoreticky, pri spustení odpočítavania vytvoríš invisible iframe do ktorého to dáš nahrávať. Potom by sa to malo natiahnuť už z cache. Nudnosť použiť doctype podporujúci framey a na stránke musíš povoliť cacheovanie, a správne nastaviť expires...
ejj, jde to, thx :)
Přesně tohle mě napadlo => vtip je v tom, že pokud se stránka nenačte celá (předčasné "zničení" iframe při např. 90% stažení) je důsledkem nulové stažení (tohle vlastně nevím ale připadá mi to pravděpodobné a logické).
Takže se musí čekat (asi mechanismem onload) a počítadlo tak nemůže dělat countdown ale countup 0123...
Už jsem zapomněl jestli se onload stránky spustí až po úplném naparsování dokumentu v iframe(popř. ještě doběhnutí jeho onload)
- u normálních FRAMů to tak je.
Jinak teď co jsem s iframy pracoval = (h)ladil aby aspoň trochu shodně fungovaly v browserech všech výrobců (hrůza) jsem pochopil, proč je zavrhli.
Přitom ale nemají za sebe žádnou náhradu....
Tak to ti stačí tohle:
function Odpocet(T){
document.getElementById("pocitadlo").innerHTML=T;
if(T--) setTimeout(function(){Odpocet(T)},1000);
}
/*********** Takhle dáš odpočet třeba 12sec **********/
Odpocet(12);
nezapoměň na <span id="pocitadlo"></span> => musí existovat v okamžiku volání Odpocet
Ahoj
<span id="pocitadlo"></span><script type="text/javascript">
var poc = document.getElementById('pocitadlo');
var cakaj = 10; // 10 sekund
var timer = window.setInterval( function() {
poc.innerHTML = cakaj;
if (cakaj==0)
{
clearInterval(timer);
window.location = 'presmeruj.jinam.html';
return;
}
cakaj--;
}, 1000);
</script>
tohle se mi libi :) jak by se to dalo upravit ze bude odpocitavani 10-9-8-7-6-5-4-3-2-1 konec a nic tam nezůstane? A misto presmerovani na jinou stranku zobrazit <imput...>?
Dekuji
<span id="pocitadlo"></span>
<input id="imput".....>
<script type="text/javascript">
var imp = document.getElementById('imput');
imp.style.display="none";
var poc = document.getElementById('pocitadlo');
var cakaj = 10;
var timer = window.setInterval( function() {
poc.innerHTML = cakaj--;
if (cakaj<0)
{
clearInterval(timer);
poc.style.display="none"; /* zmizi pocitadlo */
/*1. */ imp.style.display="inline"; /* podle toho je-li input částí řádku nebo samostatným blokem*/
/*2. */ imp.style.display="block"; /* podle toho je-li input částí řádku nebo samostatným blokem*/
return;
}
}, 1000);
</script>
Řeším podobný problém, ovšem chci u svého skriptu po ukončení, opět znovu spuštění skriptu.
Tey např. Chat se obnoví za 3s, 2s, 1s teď se zavolá funkce pro obnovu chatu a zase znovu Chat se obnoví za 3s,...
--- Toto se volá až přímo na stránce kterou potřebuji
var i = 15;
count();
--- Samotná funkce pro odpočet
function count(){
if(i > 0){
var text;
if((i < 5) && (i > 1)){
text = 'sekundy';
}
else if(i == 1){
text = 'sekundu';
}
else{
text = 'sekund';
}
setTimeout("count()", 1000);
document.getElementById("refresh-chat").innerHTML = 'Chat se obnoví za: ' + i + ' ' + text;
i--;
}else{
refreshChat();
CO PŘIDAT SEM?
}
}
Zdravím,
byl by někdo ochoten mi pomoct s počítadlem na stránky?
Potřeboval bych, aby se počítadlo vynulovalo po kliknutí na červené kolo (viz. obrázek)
#32 peter
takto to mám
Jsi nasel nekde kod a nesnazil jsi se jej ani pochopit, ze? A ted chces praci zadarmo hned a presne na miru. Mozna te to prekvapi, ale programovani presne podle pozadavku zakaznika je tezce placene. Tva nabidka, stezovani si, vymahani a nejspis i nadavani, neni dostatecne atraktivni.
funkce loadCountDowns() - vyhleda vsechny elementy, ktere maji class="CountDown" a pro kazdy z nich spusti vlastni pocitadlo. toto pocitadlo ulozi do pole countDowns[0], countDowns[1] ...
funkce CountDown(element) - vytvari samotne pocitadlo. Tudiz by mela byt stredem tve pozornosti. Datumy nastavuje podle this.element.dataset.date ktere se uklada do this.date. K tomu se dostanes pres puvodni pole countDowns[0].date. Takze by melo stacit zmenit tuhle promennou na jiny datum a cas.
Proti tem pocitadlum, co tam mas nahore, tve funguje tak, ze ho zajima realny datum a cas. Coz se hodi, kdyz potrebujes odpocitavat pocet dni do narozenin nebo pro podani prihlasky na vysokou skolu. Ale je to zbytecne slozite :)
![](img/forum_nove_psp_new.png)
Přidej příspěvek
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
![](/img/smile/1.gif)
![](/img/smile/2.gif)
![](/img/smile/3.gif)
![](/img/smile/4.gif)
![](/img/smile/5.gif)
![](/img/smile/6.gif)
![](/img/smile/7.gif)
![](/img/smile/8.gif)
![](/img/smile/9.gif)
![](/img/smile/10.gif)
![](/img/smile/11.gif)
![](/img/smile/12.gif)
![](/img/smile/13.gif)
![](/img/smile/14.gif)
![](/img/smile/15.gif)
![](/img/smile/16.gif)
![](/img/smile/17.gif)
![](/img/smile/18.gif)
![](/img/smile/19.gif)
![](/img/smile/20.gif)
![](/img/smile/21.gif)
![](/img/smile/22.gif)
![](/img/smile/23.gif)
![](/img/smile/24.gif)
![](/img/smile/25.gif)
![](/img/smile/26.gif)
![](/img/smile/27.gif)
![](/img/smile/28.gif)
![](/img/smile/29.gif)
![](/img/smile/30.gif)
![](/img/smile/31.gif)
![](/img/smile/32.gif)
Uživatelé prohlížející si toto vlákno
Podobná vlákna
Odpočet času — založil svanda777
Odpočet času — založil Petr
Globalni odpocet casu — založil Petr
Odpocet casu na web — založil evryl
Moderátoři diskuze