• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić Progress Bars

VPS Starter Arubacloud
0 głosów
536 wizyt
pytanie zadane 21 września 2019 w Rozwój zawodowy, nauka, praca przez rice Początkujący (440 p.)

Witam

Pomógł by mi ktoś zrobić z tego kodu:

<div class='goal-cont'>
 <div id='title'></div>
  <div id='goal-bar'>
   <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
  </div>
  <div id='goal-end-date'></div>
</div>
// Events will be sent when someone followers
// Please use event listeners to run functions.

document.addEventListener('goalLoad', function(obj) {
 // obj.detail will contain information about the current goal
 // this will fire only once when the widget loads
  console.log(obj.detail);
  $('#title').html(obj.detail.title);
  $('#goal-current').text(obj.detail.amount.current);
  $('#goal-total').text(obj.detail.amount.target);
  $('#goal-end-date').text(obj.detail.to_go.ends_at);
});
document.addEventListener('goalEvent', function(obj) {
 // obj.detail will contain information about the goal
 console.log(obj.detail);
 $('#goal-current').text(obj.detail.amount.current);
});

taki jak tutaj jest Progress Bar.

Jeśli się da miło by było jak by przy pewnym przekroczeniu progu dało się zmienić kolor paska postępu. Jeśli nie to trudno..

Tak czy siak nie wiem jak zrobić nawet by w ogóle zapełniał się ten pasek na jakiś kolor.

Dziękuję z góry bardzo za pomoc jak i wszelkie informacje.
Pozdrawiam - P

P.S.
Jest to mój pierwszy progress bar, przejrzewałem jakieś przykłady w internecie ale jakoś mi nadal nie wychodzi kolorowy pasek postępu. Nawet się nie koloruje.. :( 

1 odpowiedź

0 głosów
odpowiedź 21 września 2019 przez DawidK Nałogowiec (37,910 p.)
edycja 21 września 2019 przez DawidK

Prosty przykład:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Progress bar example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <div id='out'>
        <div id='in'></div>
    </div>
    <button onclick='move();'>start</button> 
</body>
</html>

Masz w nim 2 divy jeden "zewnętrzny" - reprezentujący cały pasek i drugi "wewnętrzny" w środku, który będzie przedstawiał zapełnianie, do tego przycisk do odpalenia funkcji.

 

main.css

#out {
    background-color: grey;
    height: 30px;
    width: 100%;
  }
  
  #in {
    width: 0%;
    height: 30px;
    background-color: green;
  }

Tam są style dla zewnętrznego całego paska i wewnętrznego paska przedstawiającego zapełnienie, paski są różnych kolorach, są tej samej wysokości i zewnętrzny jest pełny (100%) wewnętrzny ma 0% (przedstawia początkowe zapełnienie)

main.js

function move() {
    const progress = document.querySelector('#in');
    let width = 1;
    const id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        if(width >=80){
            progress.style.backgroundColor = 'red';
        }
        width++;
        progress.style.width = width + '%';
      }
    }
  } 

Funkcja zapełniająca pasek, pobiera element wewnętrzny (zapełnienie), i uruchamia funkcje frame("klatka") co 10ms. W funkcji frame masz zwiększanie szerokości wewnętrznego paska o 1% oraz sprawdzanie - przy 100% funkcja się zatrzyma przy 80 kolor zapełnienia zmieni się na czerwony. Funkcje mogą się nazywać inaczej oczywiście.

komentarz 6 października 2019 przez rice Początkujący (440 p.)

no dobra wszystko ładnie pięknie ale jest jedno ale..

jak przedstawiony skrypt przez Ciebie mam połączyć z tym:

 

        // Events will be sent when someone followers
        // Please use event listeners to run functions.
        document.addEventListener('goalLoad', function(obj) {
        // obj.detail will contain information about the current goal
        // this will fire only once when the widget loads
        console.log(obj.detail);
        $('#title').html(obj.detail.title);
        $('#goal-current').text(obj.detail.amount.current);
        $('#goal-total').text(obj.detail.amount.target);
        $('#goal-end-date').text(obj.detail.to_go.ends_at);
        });
        document.addEventListener('goalEvent', function(obj) {
        // obj.detail will contain information about the goal
        console.log(obj.detail);
        $('#goal-current').text(obj.detail.amount.current);
        });

i w dodatku tak żeby uruchomił się automatycznie ?? 

komentarz 7 października 2019 przez DawidK Nałogowiec (37,910 p.)
edycja 7 października 2019 przez DawidK
Jak chcesz uruchomić automatycznie możesz użyć:

window.addEventListener('load', move);

i skasować buttona.

Oprócz tego masz w tym kodzie funkcje, która po załadowaniu (prawdopodobnie - nie kojarze czegoś takiego jak 'goalLoad') przyjmuje obiekt zawierający pozagnieżdżane ustawienia: titel (jest to tytuł progressbara), current (aktualna wartość), target (wartość, która ma zostać osiągnięta), oraz date do której ma to zostać osiągniete i je wyświatla.

Jest również funkcja, która jest wyzwalana przez jakiś event (nie jest konkretnie nazwany - j.w) , która wyświetla tylko aktualny stan licznika.

Przypuszczam, że to co masz tu przedstawione to licznik (prawdopodobnie subskrybujących/obserwujących) być może przedstawiony później na progressbar. Po załadowaniu strony, funkcja przyjmuje jakiś obiekt z ustawieniami początkowymi i wyświetla dane. Obiekt pewnie jest jakoś modyfikowany tzn wzrasta aktualna liczba (nie wynika to z tego kodu - zakładałbym jakiś onclick lub click event na przycisk subskrybentów/obserwujących) i wyświetlana jest jego liczba.

Najprościej będzie jak napiszesz do czego potrzebujesz ten progressbar.
komentarz 8 października 2019 przez rice Początkujący (440 p.)
No tak progres bar ma działać / służyć do pokazania aktualnego stanu obserwujących na twitchu co dalej ma swój cel.. Tego typu rzeczy - przynajmniej ja tyle wiem - robi się za pomocą streamlabs. Idąc dalej nie podoba mi się standardowy wygląd tego progres bara więc chciałem go zmienić. O ile z takim HTML / CSS czy jakimś mało skomplikowanym kodem JS (jeszcze dam sobie jakoś radę) tak tutaj ni w ząb nie wiem jak za to się zabrać.

Więc jeśli mógł byś mi pomóc jakoś zrobić tego progres bara był bym ogromnie wdzięczny..

A prosto mówiąc jest mi potrzebny do wyświetlenia osób obserwujących..

Szukałem w internecie też ale z tego co widzę nigdzie nie ma napisane jak do tego usiąść..

Podobne pytania

0 głosów
1 odpowiedź 223 wizyt
pytanie zadane 12 grudnia 2018 w JavaScript przez Krzysio4224 Obywatel (1,690 p.)
0 głosów
0 odpowiedzi 83 wizyt
pytanie zadane 16 października 2020 w JavaScript przez napoludniestad.pl Użytkownik (960 p.)
0 głosów
1 odpowiedź 206 wizyt
pytanie zadane 1 września 2019 w HTML i CSS przez Majonez.exe Gaduła (3,490 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...