溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在某項目中遇到excel導入時客戶要求顯示滾動條效果，在此基礎上使用js為其封裝了個進度條類，只需要簡單為其創建個div容器就可輕松實現效果，類具體如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bootstrap 101 Template</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!-- 進度條示例 -->
<!-- <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<span class="proText"></span>
</div>
</div> -->
<div id="contain"></div>
<button onclick="refreshPro()">refresh</button>
<button onclick="finish()">finish</button>
<button onclick="remove()">remove</button>
<script>
var progressBar = null;
function refreshPro() {
var con = $("#contain");
progressBar = new ProgressBar();
progressBar.setContainer(con);
progressBar.showProcessBar();
}
function finish() {
progressBar.finishProcessBar();
}
function remove() {
progressBar.destroyProcessBar();
}
//如果在規定時間內都沒有完成進度條,則停留在90%地方,一旦完成立刻到100%
//寫在ajax請求執行開始處進行創建,執行完成后執行完成進度條進度為100%
//定義進度條類
//提供構建/展示/銷毀等工作
//container為要包含進入條展示容器
function ProgressBar($container) {
var self = this;
var container;
if($container != null) {
container = $container;
}
var interval; //創建的周期函數對象
var _id = "progress_bar" + new Date().getTime(); //progressBar隨機id編號
self.setContainer = function(_container) {
container = _container;
}
//為當前容器加入progress
self.createProgressBar = function() {
container.append('<div class="progress" id="'+ _id +'"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="proText"></span></div></div>');
}
self.beginProcessBar = function() {
var i = 0;
interval = setInterval(function() {
i += 10;
if(i <= 90) {
$("#" + _id + " .progress-bar").css({"width":i + "%"});
$("#" + _id + " .proText").text(i + '%');
}
}, 1000);
}
self.showProcessBar = function() {
self.createProgressBar();
self.beginProcessBar();
}
self.finishProcessBar = function() {
if(interval != null) {
$("#" + _id + " .progress-bar").css({"width": "100%"});
$("#" + _id + " .proText").text('100%');
clearInterval(interval);
}
}
self.destroyProcessBar = function() {
$("#" + _id).remove();
}
return self;
}
</script>
</body>
</html>
總結
以上所述是小編給大家介紹的利用jquery和BootStrap實現動態滾動條效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
