Odliczanie (od 10 do 1) JavaScript

Question

Witam, W jaki sposób mogę zrobić w javascript odliczanie? Na początek zrobiłem pętle for, ale ona jedynie wyświetla cyfry od 10 do 1. (kod : function odlicz() { for(var i=10; i >= 1; i--) { document.write(i); } } setInterval(odlicz(), 1000);

) Proszę o pomoc.

Answer 1

Są na to (co najmniej) dwa sposoby (ich opis może wydawać się zagmatwany, dlatego pod każdym zamieszczam kod dla rozjaśnienia):

• tworzysz sztuczny iterator oraz funkcję (np. countDown), w której umieszczasz setInterval(), gdzie za każdym razem zmniejszasz sobie iterator - powstaje sztuczna pętla. W niej za każdym razem podmieniasz tekst w DIVie (albo innym elemencie HTML) i wywołujesz funkcję countDown dopóki iterator będzie większy od jedynki (albo wartości, do której ma liczyć)

Przykład: https://jsfiddle.net/Chriss92/7ancr9ug/1/

• trudniejszy sposób, bo za pomocą pętli for i skorzystania z closure. Tworzysz pustą tablicę (np. timerArr[]). Robisz pętle wykonująca się od np. 10 do 1. Przy pierwszej iteracji (czyli dla i === 10) zapełniasz tablicę liczbami od 1 do 10 (tyle liczb, ile iteracji wykona pętla) i odwracasz tablicę resultArr.reverse() - powód wypełniania tablicy i jej odwracania wyjaśnię pod koniec. Później tworzysz sobie IIFE, do którego podajesz iterator głównej pętli, a w nim wykonujesz setTimeout(), we wnętrzu którego po prostu wyświetlasz w DIVie aktualną wartość iteratora (zachodzi tutaj zjawisko domknięcia - closure - dlatego mimo pętli, wewnątrz setTimeout widoczny jest aktualny iterator, a nie ten po zakończeniu pętli). Co do setTimeout - z uwagi na to, że chcesz odliczanie od wyższej liczby do niższej, nie możesz jako czas wywołania podać mu ani ilości czasu (bo w jednym czasie uzyskasz zakres wszystkich liczb, a chcesz po prostu odliczanie), ani ilości czasu pomnożonej przez wartość iteratora (bo uzyskasz odliczanie od 0 do końca, czyli odwrotnie niż chcesz). Tutaj trzeba skorzystać z odwróconych wartości iteratora, bo odliczasz od góry do dołu - dlatego korzystasz sobie z pomocniczej tablicy, która posiada wartości iteratora w odwrotnej kolejności. Wiem, że brzmi zagmatwanie, ale mam nadzieję, że kod to rozjaśni.

Przykład: https://jsfiddle.net/Chriss92/vy3g0wmq/

Comments

Cześć.
 Pierwszy z przykładów nie działa poprawnie na liczby większej niż 15.

Pytanie do 2 przykładu.
W którym miejscu wstawić alert, żeby po odliczeniu od 30 wyskoczył alert('koniec czasu')?
Próbowałem już wiele razy, ale nadal nie rozumiem mechaniki tego skryptu.

---

Pierwszy z przykładów nie działa poprawnie na liczby większej niż 15.

Po czym to stwierdzasz?

W którym miejscu wstawić alert, żeby po odliczeniu od 30 wyskoczył alert('koniec czasu')? 

Możesz go umieścić w if z warunkiem idx === 1 pod res.innerHTML = idx.

 

Answer 2

Co masz na myśli pod odliczaniem? Pokazywanie cyfr to chyba właśnie to. Opisz dokładniej o co ci chodzi to postaram się pomóc.

Comments

Chodzi o to, żeby na ekranie najpierw wyświetlona została liczba 10, potem 9, 8 itp. Nie obok siebie, tylko jedna po drugiej.

---

Złap jakiś element HTML i używaj innerHTML, aby podmienić jego zawartość za każdą pętlą w funkcji.

Answer 3

1. Robisz akapit z liczbą 10
2. otwierasz stronę
3. Pobierasz liczbę z akapitu
4. Jeśli jest większa od 1 odejmujesz od niej jeden i podstawiasz do akapitu.
5. czekasz 1000 ms (setTimeout((f(){}), 1000); )
6. Idź do pkt 3.

Answer 4

Jeżeli dobrze zrozumiałem pytanie, to można takie odliczanie zrobić w ten sposób:

JS:

 window.onload = zacznij_odliczac;
        var liczba = 10;
    function zacznij_odliczac()
        {
           document.getElementById("liczby").innerHTML = liczba;
            liczba = liczba-1;

            if(liczba<0) liczba = 10;
            setTimeout("zacznij_odliczac()",1000);
        }

HTML: <div id="liczby"></div>

Dajesz zmiennej liczba wartość 10, a w funkcji zmniejszasz ją co sekunde o 1 i wyświetlasz dzięki innerHTML , gdy liczba dojdzie do zera, 'resetuje' się licznik. Mam nadzieję , że pomogłem :)

Comments

Spoko, ale window.onload jest tu zbędne (można zastąpić choćby IIFE). Funkcja setTimeout() przyjmuje jako parametr funkcje (może być anonimowa), nie przekazuj jej stringa: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Poza tym Twój skrypt odlicza do 0 i powtarza odliczanie od 10, czyli działa w kółko.

---

Zawsze można dodać if'a sprawdzającego :)

Answer 5

i=10

zamień na i=1000 ( ewentualnie podstaw sobie zmienną, która Ci da możliwość wprowadzania dowolnej liczby)