[JavaScript]Countdown timer, Modyfikacja kodu Opcje

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

Ten post edytował jagon 7.10.2010, 16:22:22