具有 Javascript 的响应式 Bootstrap 进度条

Question

我在 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。如果数字超出这个范围，它应该 return 一个警告。而且，

如果数字在0到39之间，应该让进度条有一个class bg-danger
如果数字在40到69之间，应该是bg-info
如果数字在70到100之间，应该是bg-success。

Answer 1

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

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>

祝你有愉快的一天！

具有 Javascript 的响应式 Bootstrap 进度条

Responsive Bootstrap progress bar with Javascript

html

javascript

progress

twitter-bootstrap

progress-bar