Question

正在为我的笔和纸风格RPG工作，我希望能够实时更新健康栏。一直在四处张望，发现一些东西可以通过复选框而不是文本框来更新进度条，而我只是想不出该怎么做。理想情况下，id也喜欢将进度条设为自定义设计，但现在我只想使其正常工作。

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

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

文本框的动态进度栏

1 个答案: