javascript - HTML 5 进度条

Question

任何人都曾在 MArketo 登陆页面的进度条中编写代码。这个想法是在每个字段完成后栏会增加，直到所有字段都完成并且栏会是 100%？

这就是我所拥有的

<progress max="100" value="0" id="progress"></progress>

<script>
$("#payment-form input").keyup(function() {

// calculate progress

});

var numValid = 0;
$("#payment-form input[required]").each(function() {
if (this.validity.valid) {
    numValid++;
}
});

// "Cached" somewhere once
var progress = $("#progress"),
progressMessage = $("#progressMessage");

// Logic that runs after counting every time
if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
</script>

我试图从中收集信息的表格称为进度

Answer 1

试试 html5 原生进度条（仅适用于现代浏览器（基本上，除了 IE 之外的任何东西））

<progressbar max='100' value='0' id='my-id'></progressbar>
<!-- later... -->
<script type='text/javascript'>
functions setBarValue(v){
    document.getElementById('my-id').value=""+v;
}
</script>

有关浏览器支持，请参见http://www.w3schools.com/tags/tag_progress.asp 。（我知道 w3fools.com，但 w3schools 仍然值得参考）

如果您想针对所有浏览器，最好使用 jQuery UI ( http://jqueryui.com )。使用 jQuery UI，您可以使用此代码

<div id='my-id'></div>
<!-- later... -->
<script type='text/javascript'>
$(document).ready(function(){
    $("#my-id").progressbar();
});
function setBarValue(v){
    $("#my-id").progressbar({value:v});
}
</script>