我想控制进度条 使用变量
喜欢游戏中的exp吧
我可以获得一些示例来源吗?
例: 1. HP:10/10 [----------]< - Progressbar 2.被Monster攻击[HP - 3] 3.惠普:7/10 [-------]
喜欢这个 对不起英文不好
答案 0 :(得分:2)
这是一个很好的例子
var percentage = 75;
$(".progressbar").animate({
width: percentage + "%"
},1000);
.container{
width: 500px;
height: 50px;
background: #ebebeb;
margin-top: 5px;
margin-left: 5px;
}
.progressbar{
width: 0%;
height: 50px;
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="container">
<div class="progressbar">
</div>
</div>
我甚至建立了一个类似的网站:http://m-andi.comyr.com/
答案 1 :(得分:0)
您可以使用Bootstrap进度条并使用javascript var,然后随进度条一起更新。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var health = 100;
</script>
<div class="container">
<h2>Colored Progress Bars</h2>
<p>The contextual classes colors the progress bars:</p>
<div class="progress">
<div id="healthId" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Health
</div>
</div>
<button onclick="attackHealth()">Attack</button>
<script>
function attackHealth() {
health = health - 7;
document.getElementById("healthId").setAttribute("style", "width:" + health + "%");
}
</script>
</div>
</body>
</html>
&#13;