1、调用CSS样式：
<link rel="stylesheet" type="text/css" href="src/normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="number-pb.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
2、调用JS插件代码：
<script src="src/jquery.min.js"></script>
<script src="src/jquery.velocity.min.js"></script>
<script src="number-pb.js"></script>
3、添加HTML代码：
将
<!--效果html开始-->......
<!--效果html结束-->之间的html和js代码；放在<body></body>之间。
4、进度条设置：
<script>
$(function() {
function randomPercentage() {
return Math.floor(Math.random() * 100);
}
var loopBars = $('#random .number-pb').NumberProgressBar().each(function() {
$(this).reach(randomPercentage());
});
window.setInterval(function () {
loopBars.each(function() {
$(this).reach(randomPercentage());
})
}, 12000);
var num = randomPercentage();
var title = $('#sample-pb .title').text('@' + num);
var controlBar = $('#sample-pb .number-pb').NumberProgressBar({
duration: 12000,
percentage: num
});
var $controls = $('#sample-pb .control');
$controls.filter('.empty' ).click(function() { animate(0) ; })
$controls.filter('.minus-10').click(function() { animate(num - 10); })
$controls.filter('.minus-30').click(function() { animate(num - 30); })
$controls.filter('.plus-10 ').click(function() { animate(num + 10); })
$controls.filter('.plus-30 ').click(function() { animate(num + 30); })
$controls.filter('.full' ).click(function() { animate(100) ; })
function animate(val) {
if (val < 0) {
num = 0;
} else if (val > 100) {
num = 100;
} else {
num = val
}
controlBar.reach(num);
title.text('@' + num);
}
});
</script>
