如何根据输入的数字使进度条值增加答案

【问题标题】：how to make progress bar value increase according to entered number如何根据输入的数字使进度条值增加
【发布时间】：2018-09-24 10:42:05
【问题描述】：

我有一个输入和进度条。

点击按钮（btn-primary）后，我需要输入一个数字（%）并在进度条中显示该值。

这是我的 HTML：

<div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Применить</button>
   <div class="progress-wrap">
     <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>

我试图写一个脚本，但我不工作。

var val = document.querySelector('.form-controll').value;
var btn = document.querySelector('.btn-primary');
var progress = document.querySelector('.progress');
btn.addEventListener('click, displayData');
function displayData() {
  progress.attr('value', val);
  progress.style.background = 'green';
}

这里是codepen的链接： https://codepen.io/ksena19/pen/QVRNep

【问题讨论】：

这是一个可以帮助您完成进度条的示例w3schools.com/howto/howto_js_progressbar.asp

标签： javascript jquery css forms progress-bar

【解决方案1】：

我编辑了你的代码

您可以在这里查看：https://codepen.io/anon/pen/rZgLyq

HTML：

    <div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
  <button id="btn" type="button" class="btn btn-primary">Применить</button>
  <div class="progress-wrap">
     <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>  
  <progress max="100" value="0" class="progress"></progress>
</div>

JS：

$(document).ready(function(){ 
  $('#btn').click(function(){ 
    var val = $('#number').val();
    est(val);
  });
});

function est(value) {
    var progress = $(".progress"), 
        progressMessage = $(".progress-message");  

  if (value == 0) {
      progress.attr("value", "0");
      progressMessage.text("Complete the form.");
  }
  if (value == 1) {
      progress.attr("value", "33");
      progressMessage.text("There you go, great start!");
      progress.addClass('light-green');
  }
  if (value == 2) {
      progress.attr("value", "66");
      progressMessage.text("Nothing can stop you now.");
      progress.addClass('green');
  }
  if (value == 3) {
      progress.attr("value", "100");
      progressMessage.text("Completed!");
      progress.addClass('dark-green');
  }
}

【讨论】：

【解决方案2】：

您使用了 HTML 标签。此标签基于 value="0" 属性工作。如果 value=0 表示没有进展。

下面，我添加了一个确切的代码。如果我们在特定文本框中输入数字，进度条将根据数字值做出反应。您可以直接运行以下代码。

<script type="text/javascript">
    function count(){
        var getNum = document.getElementById("number");
        document.getElementById("progress").setAttribute("value", getNum);
    }
</script>

<!-- Progress bar -->
<div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
</div>
<button type="button" class="btn btn-primary" onClick="count();">Применить</button>
<div class="progress-wrap">
    <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>
    <progress max="100" value="0" class="progress" id="progress"></progress>
</div>

【讨论】：

【解决方案3】：

我创建了示例页面，该页面在单击按钮后接受输入并显示进度。包含样式和 JavaScript 函数的 HTML 代码：

<html>
    <style>
        #myProgress {
            width: 100%;
            background-color: #ddd;
        }
        #myBar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
    <body>
        <div id="myProgress">
            <div id="myBar">0%</div>
        </div>
        <br>
        <input type="text" class="form-control" id="number" min="0" max="100" required>
        <button type="button" onclick="change_progress()">Change Progress</button>
    </body>
</html>
<script>
    function change_progress() {
        var elem = document.getElementById("myBar");
        val = parseInt(document.getElementById("number").value);
        var width = 0;
        var id = setInterval(frame, val);
        function frame() {
            if (width >= val) {
                clearInterval(id);
            } else {
                width++; 
                elem.style.width = width + '%'; 
                elem.innerHTML = width * 1  + '%';
            }
        }  
    }
</script>

【讨论】：

【解决方案4】：

编辑你的js如下：

var btn = $('.btn-primary');
var progress = $('.progress');
btn.click(function(){
  var value = Number($('.form-control').val());
  progress.attr('value', progress.val() + value);
});

.progress {
    width: 20%;
    height: 20px;
    margin: 0 0 5px 0;
    background: #fff;

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Применить</button>
   <div class="progress-wrap">
     <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>

【讨论】：