您好我正在尝试创建一个动画进度条,其中包含:
我对此非常陌生,如果我的代码很混乱,我将不胜感激。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<title></title>
<style>
#mybar {
width: 10%;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<script src="../javascript/progress.js"></script>
<h1>The Progress Bar is Animated using</br>
JavaScript!</h1>
</br>
<div class="progress" style="height: 30px;">
<div id="mybar" class="progress-bar progress-bar-striped progress-bar-
animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-
valuemax="100" style="width: 0%"></div>
</div>
</br>
<div class="buttons">
<button type="button" onclick="Start()" id="strt" class="btn btn-
danger">Start Auto Progress</button>
<button type="button" onclick="Stop()" id="stp" class="btn btn-warning">Stop
Auto Progress</button>
</br>
<button type="button" onclick="Reset()" id="Rest" class="btn btn-
success">Reset</button>
<button type="button" onclick="setProgress()" id="set" class="btn btn-
dark">Set Progress</button>
<button type="button" onclick="getProgress()" id="return" class="btn btn-
info">Return Progress</button>
</br>
<button type="button" onclick="Increment()" id="Increm" class="btn btn-
primary">Increment</button>
<button type="button" onclick="Decrement()" id="Decrem" class="btn btn-
secondary">Decrement</button>
</div>
这是我正在使用的引导程序的链接
我只是想知道是否有人可以帮助我瞄准咏叹调&#39;属性 所以它从0到100而不是上面的宽度变化。
JS 函数Start(){
var elem1 = document.getElementById("mybar");
//width starts 0%
var width = elem1.getAttribute('aria-valuenow');
//increase progress every 6th of a second
var id = setInterval(frame, 600);
function frame() {
//stops at 100
if (width >= 100) {
clearInterval(id);
} //end of if
else {
width++;
elem1.style.width = width + '%';
elem1.innerHTML = width * 1 + '%';
}//end of else
}//end of frame()
}//end of start()
function Stop() {
}
// alerts progress
function getProgress() {
var GET = width;
var GET2 = GET.getAttribute('aria-valuenow');
alert(GET);
}//end of getProgress()
function setProgress() {
var GET = document.getElementById('mybar');
var SET = GET.setAttribute('aria-valuenow', 25);
alert('progress bar set to' + GET);
}//end of getProgress()
//progress + 1
function Increment() {