百分比条
1.88/5 (5投票s)
使用 Javascript 和 CSS 轻松显示简单的百分比条。
引言
在一个最近的项目中，需要一个百分比条来显示已完成的工作百分比。因此，我使用 <hr> 和 <span> HTML 标签，结合简单的 CSS 和 Javascript，想出了一个简单的实现方法来创建百分比条。
整体概念很简单：首先使用 <span> 标签包裹 <hr>。然后，通过设置 <span> 标签的边框样式，可以修改条的边框。此外，通过改变 <hr> 的高度，可以调整条的高度。
代码
以下是这个项目中实际使用的代码
<html>
<head>
<style>
span
{
border-bottom: thin solid gray;
height: 15pt;
width: 100pt;
}
hr
{
height: 10pt;
color: blue;
}
</style>
<script>
function change(x)
{
document.all.process.width=x+'%';
}
</script>
</head>
<body>
<span ><hr width=80% id = "process" name = "process" align=left></span>
<br>
<input name=input type=text />
<a onclick="change(document.all.input.value)">% SET</a>
</body>
</html>
如果有人知道其他实现方法，请与我联系或在此处留言。感谢大家。