как увеличить значение индикатора выполнения в соответствии с введенным номером - PullRequest
Новая
       1

как увеличить значение индикатора выполнения в соответствии с введенным номером

0 голосов
/ 24 сентября 2018

У меня есть индикатор ввода и индикатор выполнения.

Мне нужно ввести число (%) и отобразить значение в индикаторе выполнения после нажатия кнопки (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';
}

Вот ссылка на кодовый блок: https://codepen.io/ksena19/pen/QVRNep

Ответы [ 4 ]

0 голосов
/ 24 сентября 2018

Отредактировал ваш 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>
0 голосов
/ 24 сентября 2018

Вы использовали тег HTML.Этот тег работает на основе атрибута value = "0".Если значение = 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>
0 голосов
/ 24 сентября 2018

Я создал образец страницы, которая принимает данные и показывает прогресс после нажатия на кнопку.HTML-код, включая стиль и функцию JavaScript: 

<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>
0 голосов
/ 24 сентября 2018

Я редактировал ваш код

Вы можете проверить его здесь: 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');
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...