javascript - 如何制作一个简单的改变颜色的进度按钮

Question

我想创建类似于第一个示例的内容，但它需要将颜色和文本更改为“已下载”。 https://tympanus.net/Development/ProgressButtonStyles/

我尝试使用这些文件，但对于学习 javascript 的初学者来说太多了。是否有制作进度条的简单方法？

Answer 1

您可以通过多种方式完成，但是，这是目前我能记住的最简单的一种。它依赖于宽度属性的 CSS 转换和最小的 javascript。

btn=document.getElementById('btn');
prog=document.getElementById('progress');
text=document.getElementById('text');
btn.onclick=function() {
prog.classList.add('anima');
prog.addEventListener("transitionend", function(event) {
  text.textContent="downloaded";
}, false);

}

button {
  color:white;
  border:1px solid gray;
  border-radius:5px;
  background:green;
  cursor:pointer;
  width:200px;
  height:70px;
  padding:0;
  position:relative;
   outline:none;
}
#progress {
  width:0px;
  height:70px;
 background-color:darkgreen; /*set desired color*/
 position:absolute;
 left:0;
 top:0;
 z-index:2;
 border-radius:5px;


}
#progress.anima {
  width:200px;
  transition: width 2s ease; 
}
#bar {
  position:relative;
}
span {
  z-index:9;
  position:relative;
  text-transform:uppercase;
}

<div id="bar">
<button id="btn">
<span id="text">SUBMIT</span>
</button>
<div id="progress">
</div>
</div>

因此，设置容器，添加按钮，添加进度条 div，初始宽度:0，设置position:absolute，覆盖按钮，将文本放在上方(更高的 z-index)，点击时添加类 'anima':

#progress.anima {
  width:200px;
  transition: width 2s ease; 
}

这将使宽度平滑过渡，在进度条上添加事件监听器，它将监听“transitionend”事件，并在动画完成时更改 span 的文本。