带有Javascript的自适应Bootstrap进度栏

如何解决带有Javascript的自适应Bootstrap进度栏

我在HTML中有一个输入字段，一个按钮和一个Bootstrap进度栏：

<form action="#">
  <input type="text" id="fname" name="fname" value="Enter a number"><br>
  <input type="submit" value="Submit" onclick="check()">
</form>

<div class="progress">
  <div class="progress-bar" role="progressbar" 
       style="width: 25%" aria-valueNow="25" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

我需要使进度条代表在输入字段中输入的数字，范围是0到100。如果该数字超出此范围，它将返回一个警报。而且，

如果数字介于0到39之间，则应使进度条具有类bg-danger
如果该数字在40到69之间，则应为bg-info
如果数字在70到100之间，则应为bg-success。

解决方法

我很确定您正在寻找这样的东西：

var moveBar = function () {

    var addPoints = document.getElementById("fname").value;
    var bars = document.getElementsByClassName("progress-bar");
    
    bars[0].style.width = parseInt(addPoints) + "%";
    if (addPoints >= 0 && addPoints <= 39) {
        document.getElementById("prog").className = "bg-danger";
    }
    if (addPoints >= 40 && addPoints <= 69) {
        document.getElementById("prog").className = "bg-info";
    }
    if (addPoints >= 70 && addPoints <= 100) {
        document.getElementById("prog").className = "bg-success";
    }
    if (addPoints > 100) {
        document.getElementById("prog").className = "bg-danger";
        document.getElementById("alert-100").style.opacity = "100%";
    }
    if (addPoints < 0) {
        document.getElementById("prog").className = "bg-danger";
        document.getElementById("alert-0").style.opacity = "100%";
    }
};

#alert-100 {
    opacity: 0%;
}

#alert-0 {
    opacity: 0%;
}

.UserInterface {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <title>Progress</title>
    <!--STYLE FOR ERRORS AND OVERALL STYLING-->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!--USER INTERFACE FORM-->
    <form>
        <div class="UserInterface">
            <input type="number" id="fname" name="fname" value="Enter a number" />
            <button type="button" onclick="moveBar()">Click me!</button>
        </div>
    </form>

    <!--PROGRESS BAR-->
    <div class="progress">
        <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
    <br />
    <!--DEFINE ERRORS IF THE USER INPUTS A NUMBER LESS THAN 0 AND HIGHER THAN 100-->
    <div class="alert alert-danger" role="alert" id="alert-100">
        You cannot input a number above 100!
    </div>
    <div class="alert alert-danger" role="alert" id="alert-0">
        You cannot input a number below 0!
    </div>

    <!--THE SCRIPT USED FOR THE PROGRESS BAR-->
    <script src="app.js"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
        </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
        </script>
</body>
</html>

祝你有美好的一天！