类似YouTube的进度条 [英] YouTube-like progress bar
问题描述
我正在尝试制作类似YouTube的进度条.该栏应在页面启动时加载.到目前为止，我已经尝试过了.这是我的脚本代码
I am trying to make a YouTube-like progress bar. The bar should load at the page startup. I have tried this so far. Here is the code of my script
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$('#progress').css('width', _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert('complete');
}
});
我还包括了在此jsfiddle中，出现进度条，但是当我在IDE中使用相同的代码并运行文件时，没有进度条出现.我究竟做错了什么?或者，如果还有其他方法可以获取标准?
In this jsfiddle, the progress bar appears, but when I use the same code in my IDE and run the file no progress bar appears. What am I doing wrong? Or if there is another way to get the bar?
推荐答案
这里是完整HTML页面的示例，其中包括对jQuery库的引用.
Here is example of a complete HTML page including reference to the jQuery library.
尽管在大多数情况下它 都可以工作，但是您应该将代码包装在
$(document).ready(...)，以便在运行代码之前确保已加载所有必需的资源.
Although it will mostly work without, you should wrap your code in a
$(document).ready(...) so that you are sure all required resources are loaded before you run the code.
<!DOCTYPE html>
<html>
<head>
<title>Progress Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$({property: 0}).animate({property: 105}, {
duration: 4000,
step: function() {
var _percent = Math.round(this.property);
$("#progress").css("width", _percent+"%");
if(_percent == 105) {
$("#progress").addClass("done");
}
},
complete: function() {
alert("complete");
}
});
});
</script>
<link href="css/progressbar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="progress" class="waiting">
</body>
</html>
请注意，这是针对jQuery的第2版，该版本不支持 Internet Explorer 8 及更早版本.如果您需要对旧版Internet Explorer的支持，则应改用jQuery 1.10.2.
Note that this targets version 2 of jQuery, which does not support Internet Explorer 8 and earlier. If you need support for old Internet Explorer versions, you should target jQuery 1.10.2 instead.
如果进度条没有显示，但是在动画完成四秒钟后您确实得到了alert("complete")，则您对CSS的引用很可能是错误的(未指向正确的位置或拼写错误)文件名).
If the progress bar does not show, but you do get the alert("complete") after four seconds when the animation should be finished, it is likely that your reference to the CSS is wrong (not pointing to the right place, or misspelled file name).
这篇关于类似YouTube的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
