为动画进度条创建按钮

时间:2018-03-14 19:31:26

标签: javascript html attributes

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

  1. 自动启动按钮
  2. 停止按钮
  3. 重置按钮
  4. 返回进度值的按钮
  5. 设置进度的输入
  6. 增量按钮
  7. 减量按钮
  8. 我对此非常陌生,如果我的代码很混乱,我将不胜感激。

    <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 个答案:

没有答案