Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Countdown
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Snoopy
22.03.2006, 23:11:41
Potrzebuję prosty skrypt odliczający czas od jakiejś wartości do zera.

powinien wyglądać tak:
-przez jakis skrypt php wysyłam wartość w sekundach do skryptu JS
-w js, sekundy są zliczane na minuty, godziny - dni i wyższe wartości są niepotrzebne, moze sie przytrafić ze bedzie np. 115 godzin
-nastepnie co sekundę licznik powinien być odswierzany i pomniejszany o 1 sek
-gdy dojdzie do zera powinien pojawic się takiś tekst zamiast licznika albo jakieś zdarzenie (obstaję przy tekscie)

I tu prośba do forumowiczów. Nie znam się na JS więc chciałbym aby ktoś napisał taki banalny kodzik. Byłbym wdzięczy zwłaszcza że wszystkie countdowny na necie są albo za bardzo rozbudowane, albo trudne do rozgryzienia. A mi chodzi o takie proste liczydło.
revyag
23.03.2006, 13:26:25
Najprościej jak się da smile.gif
Kod
<script type="text/javascript">

var hours = 20;
var min = 0;
var sec=0;

function time() {
    if(sec > 0) {
        sec--;
    } else if(min > 0) {
        min--;
        sec = 59;
    } else if(hours > 0) {
        hours--;
        min = 59;
        sec=59;
    }

    if(hours ==0 && min==0 && sec==0) {
        alert("End of time....");
    }
    
    document.getElementById('tm').innerHTML=
    hours+":"+((min < 10) ? "0" + min : min)+":"+((sec < 10) ? "0" + sec : sec);
    
    setTimeout("time();", 1000);
}
</script>


[HTML] pobierz, plaintext 
  1. <body onload="time()">
  2. <span id="tm"></span>
  3. </body>
[HTML] pobierz, plaintext
Snoopy
23.03.2006, 14:34:55
mój błąd... nieco modyfikacji powinno tam się znaleźć

- nie chodzi mi o wyświetlenie okienka alert tylko żeby w miejscu gdzie jest 'czas' pojawił się tekst np: kaboom!

ale skrypt jest zajebisty...

aha jak zrobić żeby przy pomocy tego skryptu wyświetlić kilka razy w różnych miejscach strony ten czas ale z innymi wartościami...

np.
00:12:59
w stopce: 24:00:01
gdzieś w tekście: 00:00:53
i żeby każdy działał.

juz wiem ze skopiowanie:
<span id="tm"></span>

nic nie daje biggrin.gif
revyag
24.03.2006, 21:37:57
Kod
<script type="text/javascript">

var IdNo = 0;

function time (hours,mins,secs,span) {
    
    this.id = "time" + IdNo++;
    window[this.id] = this;
    
    this.hours = hours;
    this.mins = mins;
    this.secs = secs;
    this.span = span;
    
    this.show = show;
    
}

function show() {
    
    if( this.secs > 0 ) {
        this.secs--;
    } else if( this.secs == 0 && this.mins > 0 ) {
        this.mins--;
        this.secs=59;
    } else if ( this.secs == 0 && this.mins == 0 && this.hours > 0 ) {
        this.hours--;
        this.mins=59;
        this.secs=59;
    }
    if( this.hours == 0 && this.mins == 0 && this.secs == 0 ) {
        alert("Koniec czasu");
    } else {
        
        document.getElementById( this.span ).innerHTML = "Time left: " +
        (( this.hours < 10 ) ? ( "0" + this.hours ) : this.hours) + ":" +
        (( this.mins < 10 ) ? ( "0" + this.mins ) : this.mins) + ":" +
        (( this.secs < 10 ) ? ( "0" + this.secs ) : this.secs);
        
    }
    setTimeout("window."+this.id+".show()",1000);
}


function load() {
    
    var timer = new time(20,0,0,"tm");
    var timer1 = new time(14,35,45,"tm1");
    var timer2 = new time(0,10,2,"tm2");
    
    timer.show();
    timer1.show();
    timer2.show();
}
</script>

[HTML] pobierz, plaintext 
  1. <body onload="load()">
  2. <span id="tm"></span><br /><br />
  3. <span id="tm1"></span><br /><br />
  4. <span id="tm2"></span>
  5. </body>
[HTML] pobierz, plaintext

Nie wiedziałem dlaczego timer nie zmniejsza mi się więc pogoglowałem smile.gif

Pomysł z zachowaniem referencji do obiektu jest stąd:
http://www.codingforums.com/showthread.php?t=242
Snoopy
24.03.2006, 21:43:39
juz na innym forum mi ludzie pomogli:

Kod
var hours = 0;
var min = 0;
var sec = 5;

function time() {
   if(sec > 0) {
       sec--;
   } else if(min > 0) {
       min--;
       sec = 59;
   } else if(hours > 0) {
       hours--;
       min = 59;
       sec=59;
   }

   if(hours==0 && min==0 && sec==0) {
document.getElementById('tm').innerHTML="-";
   } else {
  
   document.getElementById('tm').innerHTML=
   hours+":"+((min < 10) ? "0" + min : min)+":"+((sec < 10) ? "0" + sec : sec);
   }
   setTimeout("time();", 1000);
}


__
Kod
body onload="time()">
<script src='script.js' type='text/javascript'></script>

<span id="tm"></span>

</body>



mozna prościej? hę? Rkingsmiley.png
revyag
24.03.2006, 22:24:36
Jakoś nie widzę żeby ten skrypt wyświetlał czas w trzech miejscach, poza tym powiedz mi czym się różni od tego który podałem w swoim pierwszym poście questionmark.gif
Snoopy
24.03.2006, 23:43:40
zajmuje mniej miejsca biggrin.gif i o to mi chodziło...
revyag
25.03.2006, 18:27:47
Chyba mnie nie rozumiesz.
Różni się tym że to:
Kod
alert("End of time....");

jest zamienione na to:
Kod
document.getElementById('tm').innerHTML="-";

Tego chyba mogłeś się sam domyślić, a nie szukać pomocy na innym forum.

Poza tym:
Cytat
aha jak zrobić żeby przy pomocy tego skryptu wyświetlić kilka razy w różnych miejscach strony ten czas ale z innymi wartościami...

To robi drugi skrypt który podałem.
Snoopy
26.03.2006, 00:41:55
Muszę jeszcze odkopać ten temat bo natrafiłem na pewien problem... więc tak...
skrypt na stronie umieszczam w postaci

echo '<script src=\'script.js\' type=\'text/javascript\'></script>';

i jak wlasnie z poziomu php przenieść do script.js zmienne hours, min i sec
revyag
26.03.2006, 17:32:02
Nie przekażesz nic do pliku scripts.js. Podaj te wartości jako parametry funkcji inicjującej odliczanie.
np. tak:
[PHP] pobierz, plaintext 
  1. <?php
  2. echo '<body onload="time('.$hours.','.$mins.','.$secs.')">';
  3. ?>
[PHP] pobierz, plaintext
Mesektet
27.06.2008, 08:11:41
Odkopuję ten temat bo mam podobny problem, ale dodatkowo potrzebuję żeby mimo odświeżania strony odliczało dalej (a nie od nowa). Tu chyba cookies by pomogły worriedsmiley.gif
Mam nikłą wiedzę na temat JS więc będę wdzięczna za pomoc smile.gif
revyag
27.06.2008, 12:56:50
Potrzebna będzie obsługa ciastek stąd:
http://www.quirksmode.org/js/cookies.html

I skrypt. Wygląda to tak że co sekundę jest zapisywane ciastko z aktualnym licznikiem. Po refreshu przy inicjacji licznika sprawdzana jest obecność ciastek, jeśli istnieje to stan licznika jest odczytywany z ciastka i użyty do inicjacji licznika.
Jeśli ciastek nie ma to licznik startuje z domyślnymi wartościami.

Przycisk usuń ciacha zeruje wszystko.

Licznik jest zapamiętywany i po opuszczeniu strony nie idzie dalej. Aby licznik działał po opuszczeniu strony trzeba by zapamiętywać jeszcze czas i przy odczycie pobierać aktualny czas, wyliczać rożnicę w czasie i tą różnicę odejmować od licznika smile.gif Wygląda to prosto ale takie nie jest smile.gif
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. var IdNo = 0;
  6.  
  7. //cookie
  8. function createCookie(name,value,days) {
  9.     if (days) {
  10.         var date = new Date();
  11.         date.setTime(date.getTime()+(days*24*60*60*1000));
  12.         var expires = "; expires="+date.toGMTString();
  13.     }
  14.     else var expires = "";
  15.     document.cookie = name+"="+value+expires+"; path=/";
  16. }
  17.  
  18. function readCookie(name) {
  19.     var nameEQ = name + "=";
  20.     var ca = document.cookie.split(';');
  21.     for(var i=0;i < ca.length;i++) {
  22.         var c = ca[i];
  23.         while (c.charAt(0)==' ') c = c.substring(1,c.length);
  24.         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  25.     }
  26.     return null;
  27. }
  28.  
  29. function eraseCookie(name) {
  30.     createCookie(name,"",-1);
  31. }
  32.  
  33. //time
  34. function time (hours,mins,secs,span) {
  35.     this.id = "time" + IdNo++;
  36.     window[this.id] = this;
  37.     this.hours = hours;
  38.     this.mins = mins;
  39.     this.secs = secs;
  40.  
  41.     this.span = span;
  42.     this.show = show;
  43. }
  44.  
  45. function show() {
  46.  
  47.    createCookie('czas',this.hours+":"+this.mins+":"+this.secs);
  48.  
  49.    if( this.secs > 0 ) {
  50.        this.secs--;
  51.    } else if( this.secs == 0 && this.mins > 0 ) {
  52.        this.mins--;
  53.        this.secs=59;
  54.    } else if ( this.secs == 0 && this.mins == 0 && this.hours > 0 ) {
  55.        this.hours--;
  56.        this.mins=59;
  57.        this.secs=59;
  58.    }
  59.    if( this.hours == 0 && this.mins == 0 && this.secs == 0 ) {
  60.        alert("Koniec czasu");
  61.    } else {
  62.  
  63.        document.getElementById( this.span ).innerHTML = "Time left: " +
  64.        (( this.hours < 10 ) ? ( "0" + this.hours ) : this.hours) + ":" +
  65.        (( this.mins < 10 ) ? ( "0" + this.mins ) : this.mins) + ":" +
  66.        (( this.secs < 10 ) ? ( "0" + this.secs ) : this.secs);
  67.    }
  68.    setTimeout("window."+this.id+".show()",1000);
  69. }
  70.  
  71.  
  72. function load() {
  73.  
  74.     var cookie_czas = readCookie('czas');
  75.  
  76.     if (cookie_czas) {
  77.         var out_czas = cookie_czas.split(":");
  78.  
  79.         hours = parseInt(out_czas[0]);
  80.         mins =  parseInt(out_czas[1]);
  81.         secs =  parseInt(out_czas[2]);
  82.  
  83.         var timer = new time(hours,mins,secs,"tm");
  84.  
  85.     } else {
  86.         var timer = new time(20,0,0,"tm");
  87.     }
  88.     timer.show();
  89. }
  90.  
  91. function erase() {
  92.     eraseCookie("czas");
  93.     eraseCookie("data");
  94.     document.location.href = document.location.href;
  95. }
  96.  
  97. </script>
  98. </head>
  99. <body onload="load()">
  100. <span id="tm"></span><br /><br />
  101. <button onclick="erase()">Usun ciacha</button>
  102. </body>
  103. </html>
[HTML] pobierz, plaintext
Mesektet
27.06.2008, 22:10:07
Super o to chodziło, dzięki biggrin.gif
xavierek
24.09.2010, 13:55:11
Witam mam problem skrypt działa ok ale jak zrobic aby przestał ladowac co sekunde jezeli zegarek dojdzie do 0 bo dalem ze ma sie pokazac formularz po X czasie i formularz sie pokazuje ale nie moge nic wpisac bo co sekunde ładuje go na nowo tongue.gifP

użyłem kod
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. var hours = 0;
  4. var min = 0;
  5. var sec = 5;
  6.  
  7. function time() {
  8.    if(sec > 0) {
  9.        sec--;
  10.    } else if(min > 0) {
  11.        min--;
  12.        sec = 59;
  13.    } else if(hours > 0) {
  14.        hours--;
  15.        min = 59;
  16.        sec=59;
  17.    }
  18.  
  19.    if(hours==0 && min==0 && sec==0) {
  20. document.getElementById(\'tm\').innerHTML="<form method=\"post\" action=\"greetings.php\"><input type=\"hidden\" name=\"canal_id\" id=\"cmd\" value=\"1\" />Od kogo<input type=\"hidden\" name=\"cmd\" id=\"cmd\" value=\"add\" /><br><input type=\"text\" name=\"title\" size=\"30\" maxlength=\"40\"  value=\"\" /><br><br>Treść pozdrowie<br><textarea id=\"elm1\" name=\"text\" rows=\"4\" cols=\"70\" style=\"width: 300px\"></textarea><br><hr><input type=\"submit\" name=\"save\" value=\"Submit\" />	<input type=\"reset\" name=\"reset\" value=\"Reset\" /></form>";
  21.    } else {
  22.  
  23.    document.getElementById(\'tm\').innerHTML="Kolejne pozdrowienia możesz wysłać za "
  24.    +hours+":"+((min < 10) ? "0" + min : min)+":"+((sec < 10) ? "0" + sec : sec);
  25.    }
  26.    setTimeout("time();", 1000);
  27. }
  28. </script
[PHP] pobierz, plaintext



problem rozwiazany


[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. var hours = 0;
  4. var min = 0;
  5. var sec = 5;
  6.  
  7. function time() {
  8.    if(sec > 0) {
  9.        sec--;
  10.    } else if(min > 0) {
  11.        min--;
  12.        sec = 59;
  13.    } else if(hours > 0) {
  14.        hours--;
  15.        min = 59;
  16.        sec=59;
  17.    }
  18.  
  19.    if(hours==0 && min==0 && sec==0) {
  20. document.getElementById(\'tm\').innerHTML="<form method=\"post\" action=\"greetings.php\"><input type=\"hidden\" name=\"canal_id\" id=\"cmd\" value=\"1\" />Od kogo<input type=\"hidden\" name=\"cmd\" id=\"cmd\" value=\"add\" /><br><input type=\"text\" name=\"title\" size=\"30\" maxlength=\"40\"  value=\"\" /><br><br>Treść pozdrowie<br><textarea id=\"elm1\" name=\"text\" rows=\"4\" cols=\"70\" style=\"width: 300px\"></textarea><br><hr><input type=\"submit\" name=\"save\" value=\"Submit\" />	<input type=\"reset\" name=\"reset\" value=\"Reset\" /></form>";
  21.  
  22.    } else {
  23.  
  24.    document.getElementById(\'tm\').innerHTML="Kolejne pozdrowienia możesz wysłać za "
  25.    +hours+":"+((min < 10) ? "0" + min : min)+":"+((sec < 10) ? "0" + sec : sec);
  26. setTimeout("time();", 1000);
  27.    }
  28.  
  29. }
  30. </script
[PHP] pobierz, plaintext
trzeba bylo przestawic miejsce setTimeout("time();", 1000);
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.