我正在开发一款心理锻炼类型的游戏 ( add1.herokuapp.com ),并且玩家的剩余时间有时间限制。我想使用bootstrap进度条来实现这个效果,我基本上通过覆盖bootstrap CSS中的transition-duration属性来实现这个效果
自定义.css
.progress-bar {
-webkit-transition: width 5s linear;
-o-transition: width 5s linear;
transition: width 5s linear;
}
当我想将此进度条设置回零(播放应用程序以查看其实际情况)时,问题就出现了。即使通过 Angular 数据绑定(bind)将宽度设置为零, Bootstrap 进度条也不会返回到 0%。
game.html
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{progressNum}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progressNum}}%;">
<span class="sr-only">{{progressNum}}% Complete</span>
</div>
</div>
game.js
//When I call setTimer, I call this
$scope.progressNum = 100;
//When I want to reset for the next problem, I call this
$scope.progressNum = 0;
我的猜测是,即使 ProgressNum 正在变化,bootstrap 也不会反射(reflect)这些变化。有办法解决这个问题吗?
最佳答案
您可以使用angular-ui's bootstrap 进度条指令,它具有控制进度条的当前值、最大值甚至颜色所需的功能。
<强> See this plunker 我已经演示了如何更改进度条的值。通过单击下面的每个值按钮,触发 ng-click 处理程序来更改进度条的值。
**JAVASCRIPT:**
.controller('Ctrl', function($scope) {
$scope.progress = {
value: 50,
max: 100,
color: 'warning'
};
$scope.changeValue = function(value) {
$scope.progress.value = value;
};
});
HTML
<div progressbar
class="progress-striped active"
max="progress.max"
value="progress.value"
type="{{progress.color}}">
<i>{{progress.value}}/{{progress.max}}</i>
</div>
<strong>Value: </strong><br>
<div class="btn btn-default" ng-click="changeValue(0)">0/100</div>
<div class="btn btn-default" ng-click="changeValue(25)">25/100</div>
<div class="btn btn-default" ng-click="changeValue(50)">50/100</div>
<div class="btn btn-default" ng-click="changeValue(75)">75/100</div>
<div class="btn btn-default" ng-click="changeValue(100)">100/100</div>
关于javascript - 如何将 Bootstrap 进度条重置为 0%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25028268/