Я начинаю проект, в котором я должен сделать «тест печати», когда пользователь набирает слово за определенное время.Через 3 секунды появится другое слово из массива, и таймер начнется заново.Чтобы разобраться в этом, я пытался поработать над этой «тренировочной» страницей, где я пытался сделать так, чтобы мой индикатор выполнения сбрасывался через каждый интервал моей функции repeatThis (когда создается каждый новый блок).Как я могу иметь функцию для индикатора выполнения и функцию для кода повторения (сделать поле или отобразить слово) одновременно и синхронно друг с другом.Я очень плохо знаком с javascript и еще не изучил jquery.благодарю вас.
<!DOCTYPE>
<html>
<head>
<style>
#progress {
width: 100%;
background-color: grey;
}
#bar {
width: 1%;
height: 30px;
background-color: green;
}
</style>
</head>
<body>
<button id="btn">start</button>
<button id="btn2">stop</button>
<div id='diva'>showHere
</div>
<div id="progress">
<div id="bar"></div>
</div>
<script>
var timer;
var para = document.querySelector('#para');
var btn = document.querySelector('#btn');
var btnTwo = document.querySelector('#btn2');
var progress = document.querySelector('#progress');
var bar = document.querySelector('#bar');
var timer;
var width = 0;
console.log('one');
//button to begin repeatThis
btn.onclick = function() {
timer = setInterval(repeatThis, 2000);
};
//button to stop repeatThis
btnTwo.onclick = function() {
console.log('clearInt');
clearInterval(timer)};
console.log('two');
function repeatThis() {
//setInterval(function() {
console.log('innerfunction');
var diva = document.querySelector('#diva');
var box = document.createElement('div');
box.classList.add('newBoxes');
box.style.height = '100px';
box.style.width = '100px';
box.style.border = '2px solid black';
console.log('end');
diva.appendChild(box);
console.log('end2');
showBar();
//},3000);
};
//interval bar function to display bar in sync
//with repeatThis function
function showBar() {
setIntervalBar = setInterval(frame, 500);
bar.style.backgroundColor = '#4CAF50';
function frame() {
if (width >= 100) {
clearInterval(setIntervalBar);
} else {
width += 25;
bar.style.width = width + '%';
switch (width) {
case 25:
bar.style.backgroundColor = '#CFD837';
break;
case 50:
bar.style.backgroundColor = '#dd9322';
break;
case 75:
bar.style.backgroundColor = '#dd2222';
break;
}
}
}
}
</script>
</body>
</html>