Мне действительно нравится HTML, и я экспериментирую с индикаторами выполнения и смотрю много уроков.Я сделал индикатор выполнения и увидел, как сделать так, чтобы он загружался с 0 до 100 с помощью JavaScript.Но я хочу сделать следующее.У меня есть страница с большим количеством учебников, чтобы люди могли изучать китайский язык.После окончания каждого урока я хочу, чтобы индикатор выполнения прыгал, скажем, на 5%.Моя идея заключается в том, что в конце урока я могу нажать «Далее» и увеличить индикатор выполнения на 5%.Я знаю, что мне как-то нужно заставить его взаимодействовать с моим onClick для следующего урока, но я понятия не имею, как это сделать.Есть идеи?Это мой индикатор выполнения:
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
, и мой onClick находится в отдельном html-файле:
<div class="w3-display-bottommiddle">Page 1/8</div>
<div class="downrightbtn">
<button class="next" onclick="page2()">Next</button>
</div>
</div>
Я видел из другой темы stackoverflow следующий ответ, но я не знаю, какчтобы использовать это:
$('.progress-bar').css('width', percentageCompleted + '%')
и здесь у нас есть onClick, но он загружает индикатор выполнения от 0 до 100. Как можно сделать это до 10% и позже, когда мы закончим со вторымучебник, чтобы увеличить его до 20%?
function start(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al + "%";
bar.value = al;
al++;
var sim = setTimeout("start(" + al + ")", 1);
if (al == 100) {
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";