来自文本框的动态进度条答案

【问题标题】：dynamic progress bar from textbox来自文本框的动态进度条
【发布时间】：2019-03-12 18:35:24
【问题描述】：

在我的笔和纸风格 RPG 的网站上工作，我希望能够即时更新健康栏。一直在环顾四周，发现一些东西可以通过复选框而不是文本框来更新进度条，我只是不知道该怎么做。理想情况下，我也喜欢将进度条设为自定义设计，但现在我只想让它工作。

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

【问题讨论】：

标签： javascript html css forms input

【解决方案1】：

看起来你已经掌握了大部分。您只剩下初始化和事件绑定。

// 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));

【讨论】：

谢谢。我需要更多地修改它，因为不是每个人都会有 100 HP，但这很容易，我只需要基本上将#txtJob 中的值由玩家的最大 hp 决定，这应该会产生要更新的百分比，但就是这样最简单的部分！谢谢

【解决方案2】：

关于目标，我有几个问题。您是否只需要一个文本框来确定进度条的长度？如果是这样，该长度是否基于输入数字 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>

【讨论】：