Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Countdown
Snoopy
post 22.03.2006, 23:11:41
Post #1





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 5.02.2006

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
revyag
post 23.03.2006, 13:26:25
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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


--------------------
-------------

------
Go to the top of the page
+Quote Post
Snoopy
post 23.03.2006, 14:34:55
Post #3





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 5.02.2006

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
revyag
post 24.03.2006, 21:37:57
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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


--------------------
-------------

------
Go to the top of the page
+Quote Post
Snoopy
post 24.03.2006, 21:43:39
Post #5





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 5.02.2006

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
revyag
post 24.03.2006, 22:24:36
Post #6





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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


--------------------
-------------

------
Go to the top of the page
+Quote Post
Snoopy
post 24.03.2006, 23:43:40
Post #7





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 5.02.2006

Ostrzeżenie: (0%)
-----

zajmuje mniej miejsca biggrin.gif i o to mi chodziło...
Go to the top of the page
+Quote Post
revyag
post 25.03.2006, 18:27:47
Post #8





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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.


--------------------
-------------

------
Go to the top of the page
+Quote Post
Snoopy
post 26.03.2006, 00:41:55
Post #9





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 5.02.2006

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
revyag
post 26.03.2006, 17:32:02
Post #10





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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


--------------------
-------------

------
Go to the top of the page
+Quote Post
Mesektet
post 27.06.2008, 08:11:41
Post #11





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.06.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
revyag
post 27.06.2008, 12:56:50
Post #12





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

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


--------------------
-------------

------
Go to the top of the page
+Quote Post
Mesektet
post 27.06.2008, 22:10:07
Post #13





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 27.06.2008

Ostrzeżenie: (0%)
-----

Super o to chodziło, dzięki biggrin.gif
Go to the top of the page
+Quote Post
xavierek
post 24.09.2010, 13:55:11
Post #14





Grupa: Zarejestrowani
Postów: 92
Pomógł: 2
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

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

Ten post edytował xavierek 24.09.2010, 14:01:00
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 26.04.2024 - 14:32
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn