Question

我想在每次点击时将我的进度条设置为特定百分比。现在它只能达到75％。在保存时它应该显示100％，但它没有显示。同样地，通过点击后退按钮，它会在第三次点击后退按钮时重置为25％。

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>

Answer 1

您好我已根据您的要求尝试了解决方法...请尝试并告诉我们。

var width = 40;
function move(data) {
  var elem = document.getElementById("myBar");   
	if(data == 'back' && width != 0){
    	width = width-10; 
      elem.style.width = width + '%';
    }else if(data == 'continue' && width != 100){
    	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>

如何设置为100％并重置为0％进度条

1 个答案: