динамический индикатор из текстового поля - PullRequest
Новая
       2

динамический индикатор из текстового поля

0 голосов
/ 12 марта 2019

Работаю над сайтом для моей РПГ в стиле «Перо и бумага», и я хочу иметь возможность обновлять бары здоровья на лету.Оглядевшись, я нашел кое-что для обновления панели прогессов с помощью флажков, но не текстовых полей, и я просто не могу понять, как это сделать.В идеале я хотел бы также сделать индикатор выполнения индивидуальным дизайном, но сейчас я просто хочу заставить его работать. 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Tue, 12 Mar 2019 18:08:09 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <title>Health</title>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
    .tasks{
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.tasks span{
    font-weight: bold;
}
.tasks input{
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}
.tasks a{
    color: #000;
    text-decoration: none;
    border:none;
}
.tasks a:hover{
    border-bottom: dashed 1px #0088cc;
}
.tasks label{
    display: block;
    text-align: center;
}
</style>
  </head>
  <body>
    <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
    <input name="done" class="done" type="textbox" id="txtJob" value="99">

      <script>
  var valeur = document.getElementsByName('txtJob')[0].value
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);    
//});
</script>

</body>

Ответы [ 2 ]

1 голос
/ 13 марта 2019

Похоже, у вас есть большая часть этого.Вы просто остались с инициализацией и привязкой событий. 

// Create function for updating the progress bar
function update(target) {
  var valeur = $(target).val();
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);
}

// Use that function to initialize the progress bar
update($('#txtJob'));

// Add event handlers so that changes to the textbox update the progress bar
$('#txtJob').on('change keyup', event => update(event.currentTarget));
0 голосов
/ 13 марта 2019

У меня есть несколько вопросов относительно цели.Вы хотите, чтобы только одно текстовое поле определяло длину индикатора выполнения?И если так, эта длина основана на вводе цифр 0-100?

Если это ваша цель, то вы почти у цели.Я бы переместил несколько вещей и смоделировал код следующим образом.Сначала я импортировал более новую версию jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Затем я обновил разметку HTML, включив в нее классы, упомянутые в CSS, и обновил javascript для использования jQuery, поскольку вы уже импортировали его, мы должны его использовать:) 

<body class="tasks">
    <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
    <input name="done" class="done" type="textbox" id="txtJob" value="0">

    <script>

        $(function () {
            $('#txtJob').keyup(function(){
                var valeur = $('#txtJob').val();
                $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);  
            });
        });  

    </script>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...