Cześć! Proszę Was o pomoc w aplikacji webowej, którą zaczynam tworzyć, ale nie do końca wiem, jak ją zrobić. O to, jak chciałbym, by wyglądało działanie:
https://zapodaj.net/a4f1dfa45dc91.gif.html"]https://zapodaj.net/a4f1dfa45dc91.gif.html
Działanie:
- Wybieramy w comboboxie wartość 1-10
- Progress bar pobiera wartość z comboboxa i przelicza na %.
- Jeśli wykonamy 10 przysiadów, przycisk ZROBIONE - przenosi nas do kolejnego poziomu - np. kolejną stronę PHP, na której poziom 2 wygląda już podobnie.
Póki co, utworzyłem w Bootstrapie formatkę z Comboboxem a pod nim ProgressBar:
<div class="form-group">
<label for="selectbasic">Ile przysiadów już wykonałeś?</label><br /><br />
<div class="col-md-2">
<select id="selectbasic" name="selectbasic">
<option value="1">1</option>
<option value="2">2</option>
...
<option value="10">10</option>
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Wykonane</button>
<div id="percentCount" class="percent-count"></div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<script src="script.js"></script>
Oraz progress bar w jquery, który póki co bardziej przypomina LOADING , gdyż ładuje się samodzielnie od 0% do 100% bez zależności z ComboBoxem
Plik: script.js
function progress()
{
var prg=document.getElementById('progress');
var percent=document.getElementById('percentCount');
var counter=5;
var progress=25;
var id=setIntetval(frame, 50);
function frame()
{
if(progress==500 && counter==100)
{
clearInterval(id);
}
else
{
progress+=5;
counter+=1;
prg.style.width=progress+'px';
percent.innerHTML=counter+'%';
}
}
}
progress();
Proszę o pomoc, jak mogę uzależnić Comboboxa od Progressbara, gdyż nie mam pojęcia jak to zrobić