jQuery Time如何制作進度條
[英]Jquery time how to make a progressbar
問題描述
<script type="text/javascript">
var count = 0;
var timer = $.timer(
function() {
count++;
$('.count').html(count);
},
1000,
true
);
</script>
如何使用計時器制作進度欄？ 示例每秒添加到div
<div style="background:#000;width:$.timer%;"><< here</div>
3 個解決方案
解決方案1
1 已采納 2015-11-28 14:39:00
您可以使用jQuery UI插件。 （帶計時器）
https://jqueryui.com/progressbar/
<script>
var v = 0;
var upProgress = function() {
v++;
$( "#progressbar" ).progressbar({
value: v
});
setTimeout( upProgress , 1000 );
};
$(function() {
setTimeout( upProgress , 1000 );
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
解決方案2
0 2015-11-28 14:42:33
PS。 嘗試探索新的進度元素;）
$("progress").animate({v:1}, { duration: 5000, step: function(v){ this.value = v } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <progress min="0" max="1">
解決方案3
0 2015-11-28 15:09:45
如果您不想使用jQuery：
HTML
<div id="progressbar">0%</div>
CSS
#progressbar {
width: 0px;
background-color: blue;
color: white;
padding: 5px;
}
JS
function progressBar() {
var progress = 1, timer, percent;
var bar = document.getElementById('progressbar');
var loop = function loop (progress) {
if (progress === 11) {
clearTimeout(timer);
} else {
percent = progress * 10;
bar.style.width = percent + 'px';
bar.textContent = percent + '%';
timer = setTimeout(loop, 1000, ++progress);
}
}
loop(progress);
}
progressBar();
jQuery UI：如何制作多色ProgressBar？ 細分的顏色不同
[英]jQuery UI: How to make a multi colored ProgressBar? Segments colored differently
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.