javascript – 后退按钮与进度条无法正常工作

所以我正在建立一个进度条,它实际上工作正常,但有一件事不起作用,表现得非常奇怪.
为了更好地理解,我先向您展示进度条,
你可以忽略css和html.

                                var teilprozentraw = $('.question1').length;
                                teilprozent = 100 / teilprozentraw;
                                var procentbar = 0;
                                var width = 0;
                                var step = 1;
                                
                                var mainDiv = document.getElementById('status-bar');
                                var childspan = mainDiv.getElementsByTagName('span')[1];
                                var childdiv = childspan.getElementsByTagName('div')[0];
                                var childspan2 = mainDiv.getElementsByTagName('span')[2];
                                var childdiv2 = childspan2.getElementsByTagName('div')[0];
                                var childspan3 = mainDiv.getElementsByTagName('span')[0];
                                var childdiv3 = childspan3.getElementsByTagName('div')[0];
                                
                                document.getElementById('back').onclick = function() {
                                    movebackwards();  
                                };
                                document.getElementById('next').onclick = function() {    
                                    moveforward();
                                };
                                function moveforward(){ 
                                    width = procentbar;
                                    procentbar = procentbar + teilprozent;
                                    var elem = document.getElementById("myBar");
                                    var id = setInterval(frame, 50);
                                    function frame() {
                                        if (width >= procentbar) {
                                            clearInterval(id);
                                        } else {
                                            if(width < 100){
                                                width++;
                                            }
                                            else{
                                                width = 100;
                                            }
                                            if(width >= 100){
                                                if(step < 3){
                                                    procentbar = 0;
                                                    width = 0;
                                                    step++;       
                                                }
                                                changeheaders();
                                            }  
                                            stepcheckforward();
                                            width = width.toString().split(".", 1);
                                            elem.style.width = width + '%';
                                            elem.innerHTML = width * 1 + '%';
                                        }
                                    }
                                } 
                                function movebackwards(){ 
                                    //check if element finished changing if its not changing anymore, run this if statement
                                    if(width <= 0){
                                        procentbar = 100 - teilprozent;
                                        width = procentbar;
                                    }
                                    else{
                                        width = procentbar;
                                        procentbar = procentbar - teilprozent;    
                                    }
                                    var elem = document.getElementById("myBar");
                                    var id = setInterval(frame2, 75);
                                    function frame2() {
                                        if (width <= procentbar) {
                                            clearInterval(id);
                                        } else {
                                            width--;
                                            childdiv2.style.display = "none";
                                            if(width <= 0){
                                                step--;
                                                if(step < 1){
                                                    window.close();
                                                }
                                                changeheaders();
                                            }  
                                            stepcheckbackward();
                                            width = width.toString().split(".", 1);
                                            elem.style.width = width + '%';
                                            elem.innerHTML = width * 1 + '%';
                                        }
                                    }
                                    document.getElementById("next").disabled = false;
                                } 
                                
                                function stepcheckforward(){
                                    document.getElementById('test').innerHTML = step;
                                }
                                function stepcheckbackward(){
                                    document.getElementById('test').innerHTML = step;
                                }  
                                
                                function changeheaders(){ 
                                    if(step == 1){
                                        childspan.style.color = "#183E4E";
                                        childspan.style.fontWeight = "bold";
                                        
                                        childdiv.style.display = "none";
                                        childspan3.style.color = "#999da0";
                                        childspan3.style.fontWeight = "normal";
                                        childdiv3.style.display = "none";
                                        childspan2.style.color = "#999da0";
                                        childspan2.style.fontWeight = "normal";
                                        childdiv2.style.display = "none";
                                    }
                                    if(step == 2){
                                        childdiv.style.display = "inline";
                                        childspan3.style.color = "#183E4E";
                                        childspan3.style.fontWeight = "bold";
                                        
                                        childdiv3.style.display = "none";
                                        childspan2.style.color = "#999da0";
                                        childspan2.style.fontWeight = "normal";
                                    }   
                                    if(step == 3){
                                        childdiv3.style.display = "inline";
                                        childspan2.style.color = "#183E4E";
                                        childspan2.style.fontWeight = "bold";
                                        if(width == 100){
                                            childdiv2.style.display = "inline";
                                            document.getElementById("next").disabled = true;  
                                        }
                                    }  
                                }
#status-bar{
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 40em;
    height: 4em;
    text-align: center;
    padding-top: 0.5em;
}
#status-bar span:nth-child(1){
    font-size: 16px;
    font-family: Lucida Sans Unicode;  
    color: #999da0;
}
#status-bar span:nth-child(2){
    float: left;
    padding-left: 1em;
    color: #183E4E;
    font-weight: bold;
    font-size: 16px;
    font-family: Lucida Sans Unicode;
}
#status-bar span:nth-child(3){
    float: right;
    padding-right: 1em;
    color: #999da0;
    font-size: 16px;
    font-family: Lucida Sans Unicode;
}

#myProgress{
    background-color: #EDF0F4;
    border-radius: 20px;
}
#myBar {
    width: 0%;
    height: 25px;
    background-color: rgba(24, 62, 78, 0.86);
    text-align: center; /* To center it horizontally (if you want) */
    line-height: 25px; /* To center it vertically */
    color: white;
    border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="back">Back</button>
                <button id="next">Next</button>
                
<div id="status-bar">
                <span>2. Angebot<div style="display: none;"> &#10004;</div></span><span>1. Prüfung<div style="display: none;"> &#10004;</div></span><span>3. Abschluss<div style="display: none;"> &#10004;</div></span>
                <div id="myProgress">
                    <div id="myBar">0%</div>
                    <div class="question1"></div><div class="question1"></div><div class="question1"></div><div class="question1"></div><div class="question1"></div><div class="question1"></div><div class="question1"></div>
                    
                            <div id="test"></div>
                </div>
            </div>

所以问题是,当你在例如第二个进度条上并且进度为0%时,如果按两次后退按钮,当你按下按钮两次时,你只能回到第一个进度条29%而不是15%.

以下是后退按钮的主要代码:

                             function movebackwards(){ 

                                if(width <= 0){
                                    procentbar = 100 - teilprozent;
                                    width = procentbar;
                                }
                                else{
                                    width = procentbar;
                                    procentbar = procentbar - teilprozent;    
                                }
                                var elem = document.getElementById("myBar");
                                var id = setInterval(frame2, 75);
                                function frame2() {
                                    if (width <= procentbar) {
                                        clearInterval(id);
                                    } else {
                                        width--;
                                        childdiv2.style.display = "none";
                                        if(width <= 0){
                                            step--;
                                            if(step < 1){
                                                window.close();
                                            }
                                            changeheaders();
                                        }  
                                        stepcheckbackward();
                                        width = width.toString().split(".", 1);
                                        elem.style.width = width + '%';
                                        elem.innerHTML = width * 1 + '%';
                                    }
                                }
                                document.getElementById("next").disabled = false;
                            } 

Anyone has an idea why it behaves like that ?

最佳答案
一旦您的进度条达到0%的下一步,您的宽度不会更新并保持在~85%.因此,您的条件if(width< = procentbar){在函数frame2()中为true且不更新进度条. 您可以进行以下更改:

if(width <= 0){
    procentbar = 100 - teilprozent;
    width = procentbar;
}

至:

if (width <= 0) {
    procentbar = 100 - teilprozent;
    width = 100;
}

这将解决您的问题,但它可能不是最好的解决方案.但仍然有效.

转载注明原文:javascript – 后退按钮与进度条无法正常工作 - 代码日志