2016-07-03 3 views
0

Я хочу контролировать прогресс бар с помощью переменнойЯ хочу контролировать прогресс бар

как ехр бар в играх

я могу получить некоторые примеры источников ??

Ex: 1. HP: 10/10 [----------] < --Progressbar 2. атакованный Монстра [HP - 3] 3. HP: 7/10 [ -------]

Как это Извините за плохой английский

+0

Пока неясно, что вы просите. Было бы полезно увидеть некоторый код, который вы уже написали. – nbryans

ответ

1

Вот хороший пример о том, что

var percentage = 75; 
 
$(".progressbar").animate({ 
 
\t 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/

0

Вы можете использовать Bootstrap бары прогресса и есть яваскрипт вар, который затем обновляется вместе с прогрессом баром.

<!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>