Odpočet času – JavaScript, AJAX, jQuery – Fórum – Programujte.com

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 :(

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? :)

buď funkce bez "": setTimeout(odpocet,1000)
nebo příkaz v "" : setTimeout("odpocet()",1000)

var cas=10;



function Odpocet()

{

  window.document.getElementById('pocitadlo').innerHTML = cas;

  if (cas==0)

  {

    alert('Booom!');

  }

  else

  {

    cas--;

    setTimeout(Odpocet,1000);

  }

}

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);

}

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);

var o = new Odpocet( /* podobne ako pred tym */ );



// možné meódy

o->start();

o->stop();

o->pause();

o->restart();

o->status();

...

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úť :-)

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

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.

(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? :)

Záleží na tom, jestli ten tvůj odpočet něco spouští až doběhne anebo je to jen taková okrasná časomíra a po doběhnutí tam zůstane ta nula napořád.

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>

<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>

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);

}

<a href="javascript:pocitadlo_run()">ODPOCITAJ</a>

<a href="stranka-s-oznamenim-ze-nemas-podporu-javascriptu.htm" onclick="pocitadlo_run(); return false">ODPOCITAJ</a>

<body onload="pocitadlo_run()">

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>

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>

<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....

Zdravim vsetko je to pekne ale ja chcem len uplne jednoduche odpocitavanie bez vsetkeho len nech mi ho vypisuje ....

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);

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>

<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?

}

}

To Johnyy :
Pomůžete mi někdo prosím?

pokud by bylo možno, tak mi to prosím napiště do mailu, děkuju
Anesaark@seznam.cz

Oprava: Anesark@seznam.cz

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)

Připojen obrázek.

Proc oteviras tema z roku 2008?

Pouzivas stejne JS pocitadlo? Nulovani mas preci kdyz das i=0. Neumis napsat do tlacitka onclick="i=0;" ?

Nebo v tom druhem pocitadle to mas v promenne cakaj. cakaj=20, treba?

#32 peter

Připojen obrázek.

takto to mám

to co jsi psal s tím onclick="i=0;" nefunguje

mohl by jsi mi napsat celý ten onclick prosí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 :)

Olmlouvám se, nechtěl jsem tě nějak naštvat, promiň