所以我构建了一个进度条，它实际上工作正常，但有一件事不起作用并且表现得很奇怪。 为了更好地理解，我将首先向您展示进度条， 你可以忽略 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;"> ✔</div></span><span>1. Prüfung<div style="display: none;"> ✔</div></span><span>3. Abschluss<div style="display: none;"> ✔</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()是真的，不会更新你的进度条。
您可以进行以下更改:
if(width <= 0){
procentbar = 100 - teilprozent;
width = procentbar;
}
收件人:
if (width <= 0) {
procentbar = 100 - teilprozent;
width = 100;
}
这将解决您的问题，但它可能不是这里的最佳解决方案。但仍然有效。
关于javascript - 后退按钮不能与进度条一起正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49600400/