您的位置：首页 > Web前端 > BootStrap

进度条 bootstrap

2016-12-19 10:34 375 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 进度条</title>

<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

body,html,.box{

width:100%;

height:100%;

}

.box{

position: relative;

}

.progress-container{

display: none;

z-index: 100;

position: absolute;

top:50%;

left:20%;

}

</style>

</head>

<body>

<div class="box">

<div class="container progress-container">

<div class="progress progress-striped">

<div class="progress-bar progress-bar-primary" id="processbar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:0%">

<span id="aa">80% 完成</span>

</div>

</div>

</div>

<button class="click-button">click</button>

</div>

<script type="text/javascript">

var flag = true;

$(".click-button").on("click",function(){

$(".progress-container").toggle();

// if(flag){

// $(".progress-container").css("disp
4000
lay","block");

// flag = false;

// }else{

// flag = true;

// $(".progress-container").css("display","none");

// }

})

function progress(){

var total = 10000;

var breaker = 100;

var turn = 100 / (total / breaker);

var progress = 0;

var timer = setInterval(function() {

progress = progress + turn;

$("#aa").html(progress + "% 完成");

$("#processbar").attr("style", "width:" + progress + "%");

if(progress >= 100) {

clearInterval(timer);

}

}, breaker);

}

progress();

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航