Question

ul {
  margin: 0;
  padding: 0;
}
.progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
li {
  position: relative;
  margin: 0;
  padding: 0;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

<div>some header content</div>
<ul>
  <li>
    <div class="overlay">
      <span>some stuff</span>
      <input/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
    </div>
    <progress class="progress"></progess>
  </li>
  <li>
    <div class="overlay">
      <span>some stuff</span>
      <input/>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
    </div>
    <progress class="progress"></progess>
  </li>
</ul>
<div>some footer content</div>

所以我想做的是让列表元素的背景显示该列表项处理的进度。您可以使用所选择颜色的1x1像素图像并将其设置为背景图像。然后在进度更新中，将背景宽度设置为等于该进度值。

HTML5现在具有一个progressbar元素，所以我想知道使用该元素实现相同样式会有多困难。到目前为止，这是我所拥有的最好的，而且非常挑剔。实际上有一种简单的方法可以执行我忽略的事情吗？如果不是这样，那么在这种情况下，我最好还是采用上述老式方法。

这是最终目标与之相似的一个示例。

let bgSize = 0;
function increaseWidth() {
  bgSize++;
  let elements = document.getElementsByTagName('li');
  for(let i = 0; i < elements.length; i++) {
    elements[i].style.backgroundSize = bgSize + '% 100%';
  }
  if(bgSize < 100) {
    setTimeout(increaseWidth, 500);
  }
}
setTimeout(increaseWidth, 500);

li {
  background-image: url('https://i.imgur.com/xnhGEBj.jpg');
  background-repeat: no-repeat;
  background-size: 0%;
  display: block;
  border: 1px solid #000;
  list-style-type: none;
}
ul {
  margin: 0;
  padding: 0;
}

    <div>some header content</div>
    <ul>
      <li>
        <span>some stuff</span>
        <input/>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
      </li>
      <li>
        <span>some stuff</span>
        <input/>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/PlayStation_button_X.svg"/>
      </li>
    </ul>
    <div>some footer content</div>

Answer 1

尝试一下：

JS

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout, result;

  var later = function(context, args) {
    timeout = null;
    if (args) result = func.apply(context, args);
  };

  var debounced = restArguments(function(args) {
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      var callNow = !timeout;
      timeout = setTimeout(later, wait);
      if (callNow) result = func.apply(this, args);
    } else {
      timeout = _.delay(later, wait, this, args);
    }

    return result;
  });

  debounced.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

CSS

let bgSize = 0;
let timer = null;

function increaseProgressBar () {
  bgSize++;

  const elements = document.getElementsByTagName('progress');

  for(let i = 0; i < elements.length; i++) {
    elements[i].value = bgSize;
  }

  if(bgSize < 100) {
    timer = setTimeout(increaseProgressBar, 500);
  }else{
    clearTimeout(timer);
    timer = null;
  }
}

timer = setTimeout(increaseProgressBar, 500);

HTML

ul {
  margin: 0;
  padding: 0;

  li {
    border: 1px solid #000;
    display: block;
    list-style-type: none;
    position: relative;

    progress {
      left: 0;
      position: absolute;
      right: 0;
    }

    progress[value] {
      appearance: none;
      height: 100%;
      width: 100%;
      z-index: -1;
      -webkit-appearance: none;

      &::-webkit-progress-bar {
        background-color: #fff;
      }
    }
  }
}

Demo

在进度条上叠加内容

1 个答案: