Question

我正在启动项目，以进行“打字测试”，在此时间内用户在一定时间内键入了一个单词。 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>

Answer 1

您可以将回调传递到collect中，并在其中执行两个功能。

像这样：

setInterval

香草js：SetInterval和进度栏

1 个答案: