Question

尝试使用onClick制作加载栏，但不会触发。

function click_01() {
    var elem = document.getElementById('trash_02');
    setInterval(frame, 10);
    var width = 1;
    function frame(){
       if (width >= 100){
            clearInterval(frame);
            width = 0;
       } else {
            width = width + 1;
            elem.style.width = width + '%';
       }
      }
    }

Answer 1

您无法清除功能框，您需要为您的间隔指定一个变量名，然后将其清除。

＆＃13;

var elem = document.getElementById('trash_02');
var width = 0;
var progressInterval;

elem.addEventListener('click', progressBar);

function progressBar() {
  // Name the interval to a variable
  progressInterval = setInterval(frame, 10);
};

function frame() {
  if (width < 100) {
    width++;
    elem.style.width = width + '%';
  } else {
    // We need to clear the interval variable
    clearInterval(progressInterval);
    width = 0;
  }
}

＆＃13;

#trash_02 {
  background: red;
  height: 50px;
  width: 50px;
  cursor: pointer;
}

＆＃13;

<div id='trash_02'></div>

＆＃13;

如果需要，您可以在本地设置变量，此时我想到了两种方法;

您可以在设置的时间间隔内定义匿名函数，而不是frame（）函数，并在progressBar（）函数中定义变量。
或者您可以在progressBar（）函数中定义变量，并在progressBar（）函数中编写frame（）函数。

onClick加载栏无法正常工作

1 个答案: