文本框中的动态进度条
文本框中的动态进度条
提问于 2019-03-13 02:35:25
在我的钢笔和纸张风格的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>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-13 06:30:27
看起来你已经掌握了大部分。只剩下初始化和事件绑定了。
// 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));Stack Overflow用户
发布于 2019-03-13 06:36:18
关于这个目标，我有几个问题。是否只需要一个文本框来确定进度条的长度？如果是这样的话，这个长度是否基于某人输入数字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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55128543
复制相关文章
相似问题