使用JQuery / JavaScript将按钮转换为进度条
我试图找出如何将按钮变为进度条。 例如，在一个引导按钮中，例如：
我目前正在使用经典的bootstrap进度条并通过JQuery setInterval刷新它：
是否可以将按钮变为进度条 – 因此前进的进度填充了实际按钮的背景，而不是使用单独的页面元素作为进度条？
我认为最好的做法是使用2个不同的元素，这样你可以在完成后重置表单，但是可以使用单个div来完成，但是你仍然需要在按钮中添加进度条元素除非你有其他方法使进度条…进展。
单击该按钮时，删除着色格式，并添加空白进度条。 随着进度条的更新，它会变宽，直到它填满按钮。
这是一个小提琴，让你开始： http ： //jsfiddle.net/zRBxR/
CSS：
.progress, .progress:hover { background: transparent; padding: 0; height: 30px; width: 68px; } #progress-bar { background: #000; display: block; height: 30px; width: 0; }
HTML：
JS：
var progress = 0; function startProgress() { // change button to progress button, and add progress bar $('#progress-button').addClass('progress').html(''); // update progress bar every 0.5 second setInterval(function(){ $('#progress-bar').width(progress); progress++; }, 500); }
是的，jQuery有一个.replaceWith()方法。
描述 ：使用提供的新内容替换匹配元素集中的每个元素，并返回已删除的元素集。
假设您要使用HTML5进度条，您可以编写如下代码：HTML5
JS：
$('button').replaceWith('');
提琴手： http ： //fiddle.jshell.net/KQr7S/
您可以隐藏按钮，并在按钮位置显示进度条。
function showProgress(){ $("button").fadeOut(); $("#data_loaded").fadeIn(); }
是的，我认为这是可能的。 当然，使用按钮时，如第二个示例所示，您不能让内部容器填满父容器。
但是，您可以使用 – 例如 – 按钮的背景属性来执行此操作。 因此，如果您自定义样式按钮并让背景位置根据进度值发生变化，您应该可以使其正常工作。
所以基本上，你想要从按钮左侧的按钮背景开始，然后逐渐向右移动它。
另一种解决方案是在按钮和您显示的进度条
之间切换。