Question

我有一个输入和进度栏。

单击按钮（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

Answer 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');
  }
}

Answer 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>

Answer 3

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

<div style="text-align:center"><a href="https://stackoverflow.com/"></a></div>

Answer 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>

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

4 个答案: