Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Countdown timer
Forum PHP.pl > Forum > Przedszkole
jagon
Witam Was, tym razem pytanie, a raczej prośba z dziedziny Javascript

Proszę o informację w jaki sposób zmodyfikować kod (countdown timer) tak, aby po zakonczeniu odliczania, timer znikał, a na jego miejsce pojawiał się np przycisk.

Kod
var sec = 10;   // set the seconds
var min = 00;   // set the minutes

function countDown() {
  sec--;
  if (sec == -01) {
    sec = 59;
    min = min - 1;
  } else {
   min = min;
  }
  
if (sec<=9) { sec = "0" + sec; }
  time = (min<=9 ? "<b>0" + min : min) + "</b>min<b> " + sec + "</b>sec";
if (document.getElementById) { theTime.innerHTML = time; }
  SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00')
{ sec = "00"; window.clearTimeout(SD); alert("hi alex");}
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  countDown();
}
);
CuteOne
Najprostszym rozwiązaniem jest chyba zmiana styli czyli po odliczeniu czasu element (np. <div>)w którym trzymasz zegar zmienia display na display = "none" a element z przyciskiem (wcześniej ustawiony jako display="none") zmienia styl na display=""

jagon
Ok, więc w jaki sposób to wykonać najprościej?
CuteOne
Zobacz jak to działa link, link i przerób pod swój skrypt
jagon
Niestety z racji tego, że z javascript nie miałem w ogóle styczności, w dalszym ciągu sobie nie radzę.
kamil4u
Hmmm... jest to dość proste. Jak widzisz w kodzie masz:
Kod
if (min == '00' && sec == '00')
{ sec = "00"; window.clearTimeout(SD); alert("hi alex");}
}
, który jest wywoływany po zakończenia odliczania. Tak więc, trzeba tam dać odpowiednią funkcję. Masz 2 sensowne wyjścia to co podał poprzednik, czyli zamianę stylów display lub usunięcie elementu i stworzenia nowego zamiast tego usuniętego. Pierwszy sposób jest prostszy, dlatego go opiszę.
Potrzebujesz do tego:
- DOM -> http://kurs.browsehappy.pl/Definicja/DOM i http://kurs.browsehappy.pl/JavaScript/DOM
- zmiany stylów -> https://developer.mozilla.org/pl/DOM/element.style
i teraz pseudo kod(w miejsce tego alert-a lub przy nim):
Kod
referencja_do_licznika.style.display = 'none'; //referencje uzyskujesz dzięki DOM
referencja_do_przycisku.style.display = 'block'; //referencje uzyskujesz dzięki DOM

PS. Twój kod jest mocno średni....
PS2. Jak Ci coś nie wyjdzie to pokaż kod.
jagon
Rozwiązałem sprawę, znajdując skrypt odliczający minutę, następnie wyświetlający napis. Przerobiłem go do swoich potrzeb, dodając odliczanie minut, oraz zmieniając text na button. Gdyby się komuś przydało, to bardzo proszę:

Kod
<script type="text/javascript">
      
      var num = 59;
      var num2 = 1;
      var timer;
      var timer2;

      function countdown2(){
         if(num2 > -1){
            num2--;
            if(!timer2)
               timer2 = setInterval("countdown2()",1000*60);
         }
      }
      countdown2();

      function countdown(){
         if(num < 1 && num2 < 1){
            if(timer)
               clearTimeout(timer);
            document.getElementById('countdown_ele').innerHTML = "Gotowe!<br><input type='button' name='dload' value='Pobierz plik'>";
         }else{
            document.getElementById('countdown_ele').innerHTML = "Proszę czekać<br><font style=\'color:blue\'><b><h3 style='display:inline'>"+ num2 + "</b></h3>min, <b><h3 style='display:inline'>" + num + "</h3></b>sec</font>";
            num--;
            if(num == -1)
            {num = 59;}            
            if(!timer)
               timer = setInterval("countdown()",1000);
         }
      }
      countdown();
      
    </script>


I wyświetlanie w html:

Kod
<span id="countdown_ele"></span>
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.