我正在为我的笔和纸风格 Angular 色扮演游戏制作网站，我希望能够即时更新健康栏。环顾四周，发现一些东西可以通过复选框而不是文本框来更新进度条，我只是不知道该怎么做。理想情况下，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>
最佳答案
看起来你已经掌握了大部分内容。您只剩下初始化和事件绑定(bind)。
// 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));
关于javascript - 来自文本框的动态进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55128543/