[JavaScript]Timer i licznik - jak to "ożenić" z kodem html. Opcje

[ogrzech]

Uszanowanie wszystkim,
Na początek wyznam, że o JS nie mam zielonego pojęcia.
Jest to ważne o tyle, że nawet korzystając z wyszukiwarki nie wiem, czego tak naprawdę szukać, a co gorsza - jak to zastosować...

Problem:
Mam stronę, której statyczna treść jest generowana poprzez zapytanie SQL wykonywane na serwerze bazy danych - w efekcie otrzymuję kod html. (W załączonym pliku jest bardzo okrojony - w rzeczywistości zawiera dużo więcej informacji.)
Zapytanie jest wykonywane cyklicznie poprzez cron'a, bo dane się okresowo zmieniają, przekodowywane na utf-8, i wysyłane na serwer hostujący. Strona wyświetlana jest w przeglądarce w trybie "Kiosk" i co pół godziny automatycznie się w przeglądarce odświeża.
"Dobre dusze" z pokrewnych organizacji podzieliły się ze mną arkuszem stylu oraz skryptami, które pozwalają wyświetlać treść w postaci "bloków" w sposób i w formacie, który jest dla mnie odpowiedni.
Do tego momentu wszystko rozumiem, wszystko potrafię (poza modyfikacją skryptu .js), no i wszystko działa.

Chciałbym jednak jeszcze dodatkowo dodać do strony timer typu countdown oraz licznik dla wyświetlanego "bloku" treści i liczbę "bloków" treści znajdujących się w pliku html.
I tu utknąłem...
W sieci jest co prawda multum przykładów timerów - i co najmniej kilka z nich próbowałem "ożenić" z kodem w skrypcie przewin.js, który mam do dyspozycji.
W najlepszym wypadku osiągnąłem jednak tylko to, że co prawda timer się aktualizował, ale nie zmieniały się wyświetlane "bloki". W przypadku "średnim" timer aktualizował się tylko dla pierwszego "bloku". A w najgorszym... spowodowałem crash przeglądarki ;-)

Natomiast na temat licznika i liczby "bloków" nawet nie wiem czego szukać...
Wydaje mi się, że trzeba byłoby w skrypcie policzyć ilość wystąpień

Kod

<div class="sp">

w dokumencie html (bo ten element identyfikuje w nim poszczególne "bloki" treści, a w trakcie wyświetlania odpowiednio inkrementować liczbę już wyświetlonych bloków.

Ważne:
Liczba "bloków" treści jest zmienna, więc nie można ustawić jej w skrypcie jako stałej.
Całość powinna działać w ten sposób, że timer powinien odliczać "w dół" czas do wyświetlenia kolejnego "bloku" (w załączonym pliku czas jest ustawiony na 5 sekund, w rzeczywistości będzie to coś z przedziału 15-30 sekund), natomiast w przypadku osiągnięcia ostatniego bloku cały "przewijanie" powinno cyklicznie się powtarzać od pierwszej pozycji do chwili automatycznego przeładowania strony, a po przeładowaniu oczywiście rozpocząć od jedynki.

Z niejakim wstydem muszę wyznać, że najbardziej będę wdzięczny za "gotowca" lub odesłanie do naprawdę łopatologicznie wyłożonej teorii - osobiście straciłem przez ten banalny przecież problem cały weekend, z zerowymi efektami...

Link do jsfiddle.net ze "zobrazowaniem" problemu:
https://jsfiddle.net/ysaych41/3/

Uwaga: miejsca na timer i licznik są daaaleko po prawej - strona ma pracować w rozdzielczości 1920x1200.

Skrypt na jsfiddle.net jest zapisany w pliku o nazwie przewin.js
Dodatkowo wykorzystywany jest jquery-1.9.1.js

[bostaf]

Siema. Tu masz gotowca: https://jsfiddle.net/bostaf/dh5wnywu/
Nie objaśniam bo nie chciałeś, ale jak zmienisz zdanie to napisz.

[ogrzech]

bostaf, ślicznie dziękuję za rozwiązanie.
Działa dokładnie tak, jak bym sobie życzył

Na objaśnieniach faktycznie mi nie zależy, bo i tak zapewne niewiele bym nie zrozumiał - jestem "bazodanowcem", a z rozwiązań webowych to potrafię jedynie wyrzeźbić (różnymi metodami - w tym "full automatic" za pomocą zapytań) czysty html i dostosowywać go do różnych potrzeb, jeśli trzeba.


[EDIT]
Jeszcze gwoli uzupełnienia...

W rzeczywistości "Dane 1", "Dane 2" itd. nie kończą się cyfrą, którą kol. bostaf wykorzystał jako licznik dla aktualnie wyświetlanego bloku danych.
Do czego miał oczywiście podstawy, bo tego wyraźnie nie zaznaczyłem.

W związku z tym w wersji produkcyjnej zamiast tekstu "Strona X z XXX" wyświetlało się "Strona NaN z XXX".

Poradziłem sobie poprzez małą modyfikację kodu kol. bostaf w taki sposób, że dodałem dwie dodatkowe zmienne:

Kod

var licznik_blokow = 0;
var liczba_blokow = 0;

oraz zmianę function update() na taką postać:

Kod

function update() {
    var cel = $('.sp.active table:first tbody tr:first td:nth-child(3)');

    liczba_blokow = $(".sp").length;
    licznik_blokow = licznik_blokow + 1;
        if (licznik_blokow > liczba_blokow) {
            licznik_blokow = 1;
        }

//    cel.html("Strona " + parseInt($(".sp.active .tekst_blekitny_duzy").text().replace(/[^0-9]/gi, '')) + " z " + $(".sp").length + "<br>Następna za " + odswiezanie);
    cel.html("Strona " + licznik_blokow + " / " + liczba_blokow + "<br>Następna za " + odswiezanie);

    licz = odswiezanie - 1;

    licznik = setInterval(function() {
//        cel.html("Strona " + parseInt($(".sp.active .tekst_blekitny_duzy").text().replace(/[^0-9]/gi, '')) + " z " + $(".sp").length + "<br>Następna za " + licz);
        cel.html("Strona " + licznik_blokow + " / " + liczba_blokow + "<br>Następna za " + licz);
        if (licz <= 0) {
            clearInterval(licznik);
            return;
        }
        licz--;
    }, 1000);
}

Co oczywiście w żaden sposób nie zmienia faktu, że bez wzorca autorstwa kol. bostaf na pewno samodzielnie bym sobie nie poradził.

Ten post edytował ogrzech 24.05.2017, 08:50:46