如何設置爲100％並重置爲0％進度條

我想在每次點擊時將我的進度條按一定的百分比工作。現在它的工作量只有75％。保存時應該顯示100％，但不會顯示。同樣，通過點擊返回按鈕，它會上升到25％，第三次點擊返回按鈕時它應該重置爲0％。如何設置爲100％並重置爲0％進度條

HTML

<div id="myProgressbar" class="progress" style="height: 2px;"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; height: 10px;"> 
     <span class="sr-only">0% Complete</span> 
    </div> 
</div> 
<div class="btns"> 
    <button type="button" name="sub" id="back" class="btn btn-default btn-lg" onclick="myFunctions()">back</button> 
    <button type="button" name="add" id="continue" class="btn btn-success btn-lg" onclick="myFunction()" >Continue</button> 
</div> 

<form action="/action_page.php" id="person" class="form-inline"> 

    <div class="form-group"> 
     <label for="fname">First Name:<input type="text" class="form-control" id="fname" placeholder="First Name" required="" title="First Name"></label> 
    </div> 

    <div class="form-group"> 
     <label for="mname">Middle Name:<input type="text" class="form-control" id="mname" placeholder="Middle Name" title="Middle Name"></label> 
    </div> 

    <div class="form-group"> 
     <label for="lname">Last name:<input type="text" class="form-control" id="lname" placeholder="Last Name" title="Last Name"></label> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 

</form> 

<form action="/action_page.php" id="details" class="form-inline"> 

    <div class="form-group"> 
     <label for="address">Address:<input type="text" class="form-control" rows="5" id="address" placeholder="Enter Address" title="Address"></label> 
    </div> 

    <div class="form-group"> 
     <label for="city">City:<input type="text" class="form-control" id="city" placeholder="Enter City"></label> 
    </div> 

    <div class="form-group"> 
     <label for="pin">Pin Code:<input type="text" class="form-control" id="pin" placeholder="Enter Pincode"></label> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 

</form> 

<form action="/action_page.php" id="account" class="form-inline"> 

    <div class="form-group"> 
     <label for="pis">PIS:<input type="text" class="form-control" id="pis" placeholder="PIS"></label> 
    </div> 

    <div class="form-group"> 
     <label for="psp">PSP:<input type="text" class="form-control" id="psp" placeholder="PSP"></label> 
    </div> 

    <div class="form-group"> 
     <label for="ped">PED:<input type="text" class="form-control" id="ped" placeholder="PED"></label> 
    </div> 

    <div class="form-group"> 
     <label for="pno">PNO:<input type="text" class="form-control" id="pno" placeholder="PNO"></label> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 

</form> 

<form action="/action_page.php" id="premium" class="form-inline"> 

    <div class="form-group"> 
     <label for="pis">IPU:<input type="text" class="form-control" id="pis" placeholder="PIS"></label> 
    </div> 

    <div class="form-group"> 
     <label for="psp">NCB:<input type="text" class="form-control" id="psp" placeholder="PSP"></label> 
    </div> 

    <div class="form-group"> 
     <label for="ped">TP REF:<input type="text" class="form-control" id="ped" placeholder="PED"></label> 
    </div> 

    <button type="submit" class="btn btn-default">Submit</button> 

</form> 
<div class="btns"> 
    <button type="button" name="sub" id="back" class="btn btn-default btn-lg" onclick="myFunctions()">back</button> 
    <button type="button" name="add" id="continue" class="btn btn-success btn-lg" onclick="myFunction()" >Continue</button> 
</div>

的Javascript

<script> 
    var num = 1; 
     document.getElementById("back").disabled = true; 
     document.getElementById("details").style.display="none"; 
     document.getElementById("person").style.display="block"; 
     document.getElementById("account").style.display="none"; 
     document.getElementById("premium").style.display="none"; 


    function myFunction() { 
     var listArry = document.getElementsByClassName('list'); 
     for(var i = 0; i < listArry.length; i++){ 
      listArry[i].style.color = "#CCC"; 
     } 

     if (num==1){ 
      document.getElementById('navlnk1').style.color = "black"; 
      document.getElementById('navlnk').style.color = "#CCC"; 
      document.getElementById("back").disabled = false; 
      document.getElementById("person").style.display="none"; 
      document.getElementById("details").style.display="block"; 
      var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 25) { 
        clearInterval(id); 
       } else { 
       width++; 
       document.getElementById("myProgressbar").style.backgroundColor = "#0FA561"; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
        } 
       } 

      num=2; 
     } 

     else if(num==2){ 
      document.getElementById('navlnk2').style.color = "black"; 
      document.getElementById("details").style.display="none"; 
      document.getElementById("account").style.display="block"; 
      var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 50) { 
        clearInterval(id); 
       } else { 
       width++; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
       } 
      } 

      num=3; 
     } 

     else if(num==3){ 
      document.getElementById('navlnk3').style.color = "black"; 
      document.getElementById("account").style.display="none"; 
      document.getElementById("premium").style.display="block"; 
      document.getElementById('continue').innerHTML = "Save"; 
      var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 75) { 
       clearInterval(id); 
       } else { 
       width++; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
       } 
      } 
     } 
    } 
</script> 

<script> 
    var num = 1; 
    function myFunctions() { 
    var listArry = document.getElementsByClassName('list'); 
    for(var i = listArry.length; i >0; i--){ 
    } 
    if (num==3){ 
     document.getElementById('navlnk2').style.color = "black"; 
     document.getElementById('navlnk3').style.color = "#CCC"; 
     document.getElementById('navlnk1').style.color = "#CCC"; 
     document.getElementById('navlnk').style.color = "#CCC"; 
     document.getElementById("premium").style.display="none"; 
     document.getElementById("account").style.display="block"; 
     document.getElementById('continue').innerHTML = "Continue"; 
     var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 50) { 
        clearInterval(id); 
       } else { 
       width++; 
       document.getElementById("myProgressbar").style.backgroundColor = "#0FA561"; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
        } 
       } 
     num=2; 

    } 
    else if (num==2){ 
     document.getElementById('navlnk1').style.color = "black"; 
     document.getElementById('navlnk').style.color = "#CCC"; 
     document.getElementById('navlnk2').style.color = "#CCC"; 
     document.getElementById("account").style.display="none"; 
     document.getElementById("details").style.display="block"; 
     var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 25) { 
        clearInterval(id); 
       } else { 
       width++; 
       document.getElementById("myProgressbar").style.backgroundColor = "#0FA561"; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
        } 
       } 
     num=1; 

    } 
    else if(num==1){ 
     document.getElementById('navlnk').style.color = "black"; 
     document.getElementById('navlnk1').style.color = "#CCC"; 
     document.getElementById("details").style.display="none"; 
     document.getElementById("person").style.display="block"; 
     document.getElementById("back").disabled = true; 

    } 

    } 
</script> 

<script> 
    var num = 1; 
    function myFunctions() { 
    var listArry = document.getElementsByClassName('list'); 
    for(var i = listArry.length; i >0; i--){ 
    } 
    if (num==3){ 
     document.getElementById('navlnk2').style.color = "black"; 
     document.getElementById('navlnk3').style.color = "#CCC"; 
     document.getElementById('navlnk1').style.color = "#CCC"; 
     document.getElementById('navlnk').style.color = "#CCC"; 
     document.getElementById("premium").style.display="none"; 
     document.getElementById("account").style.display="block"; 
     document.getElementById('continue').innerHTML = "Continue"; 
     var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 50) { 
        clearInterval(id); 
       } else { 
       width++; 
       document.getElementById("myProgressbar").style.backgroundColor = "#0FA561"; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
        } 
       } 
     num=2; 

    } 
    else if (num==2){ 
     document.getElementById('navlnk1').style.color = "black"; 
     document.getElementById('navlnk').style.color = "#CCC"; 
     document.getElementById('navlnk2').style.color = "#CCC"; 
     document.getElementById("account").style.display="none"; 
     document.getElementById("details").style.display="block"; 
     var elem = document.getElementById("myProgressbar"); 
      var width = 10; 
      var id = setInterval(frame, 10); 
      function frame() { 
       if (width >= 25) { 
        clearInterval(id); 
       } else { 
       width++; 
       document.getElementById("myProgressbar").style.backgroundColor = "#0FA561"; 
       elem.style.width = width + '%'; 
       elem.innerHTML = width * 1 + '%'; 
        } 
       } 
     num=1; 

    } 
    else if(num==1){ 
     document.getElementById('navlnk').style.color = "black"; 
     document.getElementById('navlnk1').style.color = "#CCC"; 
     document.getElementById("details").style.display="none"; 
     document.getElementById("person").style.display="block"; 
     document.getElementById("back").disabled = true; 

    } 

    } 
</script>

來源

2017-04-17 cse project

能否請發表您的完整的代碼，所以我可以幫助... –

可以清理你的代碼？刪除重複或無意義的代碼 - 許多'document.getElementById（...）'語句導致'null'，並且這裏有2個'myFunctions'。 – shaochuancs

新增完整代碼@Auuj Tiwary –

您的需求嗨，我已經嘗試解決方法...請您嘗試一下，讓我們知道。

var width = 40; 
 
function move(data) { 
 
    var elem = document.getElementById("myBar"); 
 
\t if(data == 'back' && width != 0){ 
 
    \t width = width-10; 
 
     elem.style.width = width + '%'; 
 
    }else if(data == 'continue' && width != 100){ 
 
    \t width = width+10; 
 
     elem.style.width = width + '%'; 
 
     
 
    } 
 
    
 
}

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
#myProgress { 
 
    width: 100%; 
 
    background-color: #ddd; 
 
} 
 

 
#myBar { 
 
    width: 40%; 
 
    height: 30px; 
 
    background-color: #4CAF50; 
 
} 
 
</style> 
 
<body> 
 

 
<h1>JavaScript Progress Bar</h1> 
 

 
<div id="myProgress"> 
 
    <div id="myBar"></div> 
 
</div> 
 

 
<br> 
 
<button onclick="move('back')">Back</button> 
 
<button onclick="move('continue')">Continue</button> 
 

 
</body> 
 
</html>

來源

2017-04-17 06:47:53 SjVnyk

此代碼對我有幫助，但根據我的程序在onclicking時會調用另一個函數。雖然從我的函數調用這個函數，它顯示soem錯誤 –

ok。你遇到了什麼錯誤？你能否把它粘貼在這裏，以便我們能夠理解你的問題 – SjVnyk

如何設置爲100％並重置爲0％進度條

回答

相關問題