Question

您好我正在尝试创建一个动画进度条，其中包含：

自动启动按钮
停止按钮
重置按钮
返回进度值的按钮
设置进度的输入
增量按钮
减量按钮

我对此非常陌生，如果我的代码很混乱，我将不胜感激。

<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() {

为动画进度条创建按钮

0 个答案: