如何调整 Bootstrap 进度条的宽度并充分利用进度条？答案

【问题标题】：How to adjust the width of the Bootstrap progress bar and fully utilize the bar?如何调整 Bootstrap 进度条的宽度并充分利用进度条？
【发布时间】：2021-07-01 21:21:03
【问题描述】：

我正在做一个有 18 个问题的测验。我想使用 Bootstrap 添加进度条。我正在尝试将类进度条的宽度更改为更长，因为我希望它能够充分利用进度条，但我仍然找不到解决方案。

function getProgress() {
return document.getElementById("progressbar").getAttribute("aria-valuenow");
    
return document.getElementById("progressbar").getAttribute("style","width");
return document.getElementById("progressbar").innerHTML;
}

function setProgress(value) {
document.getElementById("progressbar").setAttribute("aria-valuenow",value);

document.getElementById("progressbar").setAttribute("style","width: " +value+ "%"); 
document.getElementById("progressbar").innerHTML = (value+ "%"); 
}

function increment() {
    var i = getProgress();
    if(i < 18){
        i++;
        setProgress(i); 
    }else{
        alert("Progress Complete!");
    }
}

function decrement() {
    var d = getProgress();
    setProgress(d - 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="1" aria-valuemax="18" id="progressbar" ></div>
</div>

<input type="button" value="Next" onclick = "increment()"/>

【问题讨论】：

标签： php bootstrap-4

【解决方案1】：

如果只有 18 个问题，在某个时候，您应该将回答的问题数除以 18，然后将该值乘以 100 以获得您正在寻找的百分比宽度，如下所示：

function getProgress() {
    return document.getElementById("progressbar").getAttribute("aria-valuenow");

    /*return document.getElementById("progressbar").getAttribute("style", "width");
    return document.getElementById("progressbar").innerHTML;*/
}

function setProgress(value) {
    var percent = value / 18 * 100;
    document.getElementById("progressbar").setAttribute("aria-valuenow", value);

    document.getElementById("progressbar").setAttribute("style", "width: " + percent + "%");
    document.getElementById("progressbar").innerHTML = (value);
}

function increment() {
    var i = getProgress();
    if (i < 18) {
        i++;
        setProgress(i);
    }
    
    if (i === 18) {
        alert("Progress Complete!");
    }
}

function decrement() {
    var d = getProgress();
    setProgress(d - 1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="1" aria-valuemax="18" id="progressbar"></div>
</div>

<div class="progress"></div>
<input type="button" value="Next" onclick="increment()" />

只有你的第一个函数中的 return 语句才会被执行。您的其他退货语句不会发生。

【讨论】：

非常感谢您的帮助。我真的很感激。