1

我没有使用 javascript 的经验，所以我想知道是否有人知道可以与我的进度条一起使用的脚本。

我的设置是这样的：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
progress {
width: 100%;
height: 5px;
top: 0;
left: 0;
position: absolute;
color: #1990c8;
appearance: none;
-webkit-appearance: none;
-o-appearance: none;
}
progress::-moz-progress-bar { 
background: #1990c8;
}
progress::-webkit-progress-value {
background: #1990c8;
}
progress::-webkit-progress-bar {
background: #e1e1e1;
}
</style>
</head>
<body>
<progress id="progressbar" value="50" max="100"></progress>
</body>
</html>

在页面加载时，我希望进度条的值从 0 变为 100%。

4

3 回答 3

0

这个 JavaScript 可以做你想做的事，它创建 youtube 样式，顶部进度条加载。

http://github.hubspot.com/pace/docs/welcome/

于 2014-01-19T04:19:24.350 回答
0

先读一下jquery你可以学到很多，看看http://jqueryui.com/progressbar/#default

于 2013-10-09T11:43:47.160 回答
0

TwitterBootstrap 还提供了一个不错的进度条，基于 CSS3 动画 ( http://getbootstrap.com/components/#progress )。

你可以简单地改变它的宽度动画栏：在这个简单的小提琴中，我使用 jQuery 来做到这一点：http: //jsfiddle.net/marcogualtieri/qG2Kr/

HTML：

<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:0"></div>
</div>

JS：

function fake_elaboration(step) {
  setTimeout(function () {
    step++;
    $(".progress-bar").width(step + "%");
    if (step != 100) {
        fake_elaboration(step);
    } else {
        setTimeout(function () {
            // action to perform when bar is completed
        }, 300);
    }
  }, 100); 
}

如您所见，等待是使用具有内部超时的递归函数模拟的。您只需在页面加载时调用此函数，将 -1 作为初始步骤传递。

于 2013-10-10T14:25:47.687 回答