在某项目中遇到excel导入时客户要求显示滚动条效果,在此基础上使用js为其封装了个进度条类,只需要简单为其创建个div容器就可轻松实现效果,类具体如下:
& lt; !DOCTYPE html>
& lt; html lang=坝τ谩北?
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”/比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1”/比;
& lt; title>引导101 Template
& lt; !——最新版本的引导核心CSS文件——比;
& lt;链接rel="样式表" href=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7 dist/css/bootstrap.min.css”rel=巴獠縩ofollow”诚信=皊ha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz/K68vbdEjh5u”crossorigin=澳涿北?
& lt;脚本src=" https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js”祝辞& lt;/script>
& lt; !——最新的引导核心JavaScript文件——比;
& lt;脚本src=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js”诚信=皊ha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin”=澳涿弊４? lt;/script>
& lt;/head>
& lt; body>
& lt; !——进度条示例——比;
& lt; !类——& lt; div=敖健北?
& lt; div类==皃rogressbar”“进度条”角色aria-valuenow=" 0 "
aria-valuemin=" 0 " aria-valuemax=" 100 "比;
& lt;跨类=" proText "祝辞& lt;/span>
& lt;/div>
& lt;/div>——比;
& lt; div id="包含"祝辞& lt;/div>
& lt; button> refresh
& lt; button> finish
& lt; button> remove
& lt; script>
var progressBar=零;
函数refreshPro () {
var con=$(" #包含");
progressBar=new progressBar ();
progressBar.setContainer (con);
progressBar.showProcessBar ();
}
函数完成(){
progressBar.finishProcessBar ();
}
函数删除(){
progressBar.destroyProcessBar ();
}//如果在规定时间内都没有完成进度条,则停留在90%的地方,一旦完成立刻到100%//写在ajax请求执行开始处进行创建,执行完成后执行完成进度条进度为100%//定义进度条类//提供构建/展示/销毁等工作//容器为要包含进入条展示容器
函数ProgressBar(容器){
var自我=;
var容器;
如果($容器!=null) {
容器=$容器;
}
var间隔;//创建的周期函数对象
var _id=" progress_bar " +新日期().getTime ();//progressBar随编机id号
自我。setContainer=函数(_container) {
容器=_container;
}//为当前容器加入进步
自我。createProgressBar=function () {
container.append (' & lt; div类=敖健眎d=" + _id +”祝辞& lt; div类=敖忍酢苯巧?皃rogressbar”aria-valuenow=" 0 " aria-valuemin=" 0 " aria-valuemax=" 100 "祝辞& lt;跨类=皃roText祝辞& lt;/span> & lt;/div> & lt;/div>”);
}
自我。beginProcessBar=function () {
var=0;
间隔=setInterval(函数(){
我+=10;
如果(我& lt;=90) {
$ (" # " + _id +“.progress-bar”)。css({“宽度”:i + " % "});
$ (" # " + _id +“.proText”)。文本(i + ' % ');
}
}, 1000);
}
自我。showProcessBar=function () {
self.createProgressBar ();
self.beginProcessBar ();
}
自我。finishProcessBar=function () {
如果(间隔!=null) {
$ (" # " + _id +“.progress-bar”)。css({“宽度”:“100%”});
$ (" # " + _id +“.proText”)。text (100%);
clearInterval(间隔);
}
}
self.destroyProcessBar=function () {
$ (" # " + _id) .remove ();
}
回归自我;
}
& lt;/script>
& lt;/body>
& lt;/html>
以上所述是小编给大家介绍的利用jquery和引导实现动态滚动条效果,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
