Question

我对javascript很新，我有一个问题。我目前正试图让加载条改变颜色并在达到100％后重置，但主要问题是，或者至少我认为我的if语句无效。无论如何要测试元素的颜色和宽度？感谢。

        function upg_01() {
    if (cash >= priceUpg_01) {
    var width = 0;
    width = width + 20;
    a.style.width = width + '%';
    priceUpg_01 = priceUpg_01 * 10;
    multiplier_01 = multiplier_01 * 3;
  }
 if (document.getElementById('upg_01c').style.color === "green" && 
document.getElementById('upg_01c') === 100 + '%') {
    document.getElementById('upg_01c').style.color = "yellow";
    document.getElementById('upg_01c').style.width = 0 + '%';
 }

Answer 1

const timer = setInterval( () => {
  // select the progress bar element
  const progressBar = document.getElementById('progress-bar');
  // get the innerHTML of the progess bar
  // doubling as our progress state/value
  let progress = parseInt( progressBar.innerHTML );
  // arbitrary addition/growth of the progress
  progress += 3;
  // check if progress has met or exceeded 100%
  if( progress >= 100 ){
    // this is just for the setInterval to stop it 
    // from continually executing
    clearInterval( timer );
    // add a new class to the progress bar (keeping
    // the CSS separate from the JavaScript -- there's
    // a lot of opinions on this, do what you feel
    // comfortable with
    progressBar.className = 'yellow';
  }
  // Update the progress value inside the progress
  // bar
  progressBar.innerHTML = progress;
  // Update the width of the progress bar by setting
  // the css style value
  progressBar.style.width = progress + '%';
// timed loop that will trigger every 100 miliseconds
}, 100 );

#progress-bar{
  color: transparent;
  font-size: 0px;
  width: 0%; height: 3px;
  overflow: hidden;
  background-color: green;
  transition: all 0.5s;
}
  #progress-bar.yellow{ background-color: yellow; }
#loader-wrapper{
  padding: 5%;
  width: 90%;
  border: solid 1px black;
  border-radius: 5px;
}

<div id="loader-wrapper">
  <div id="progress-bar">0</div>
</div>

测试颜色和宽度？

1 个答案: