本文介绍如何使用原生JavaScript实现一个可控制的进度条。核心逻辑包括根据用户输入动态调整容器宽度，通过定时器循环更新内部填充块的宽度和百分比文本。文章详细解析了宽度计算、数值累加及DOM更新的实现细节，并提供了完整的HTML与JS代码示例供参考。
前言与概述
前言
进度条组件在各类应用场景中十分常见。通常情况下，开发者倾向于从网络搜索现成的代码直接复用，而较少有人愿意从零开始编写源码。本文将演示如何手动实现一个基础的进度条功能，此处暂不涉及视觉美化，开发者可根据实际需求自行添加样式。
相关源码已托管至Github：进度条源码
首先展示最终效果：
实现原理分析
尽管视觉效果较为简陋，但我们将重点分析其实现原理。与前几篇文章类似，我们需要先梳理实现过程中的关键难点。
难点一：进度条的生成依赖于动态宽度，即外层div的宽度并非固定值。
难点二：显示的百分比数值是动态变化的，需要通过计算得出。
难点三：每次状态更新时，都必须重新计算并显示百分比，这意味着计算公式中的分子和分母均为变量。
解决上述三个核心问题后，进度条的基本功能即可实现。至于颜色变化等视觉效果，并非技术难点。
核心逻辑实现
关于动态宽度的实现：这并不复杂。只需获取用户输入的目标长度值，并将其赋值给容器的CSS宽度属性即可。
var user_number = $("#user_number").val();
context.style.width = user_number+"px";关于百分比的计算：百分比等于内部填充块的宽度除以外层容器的总宽度。因此，只要内部填充块的宽度发生动态变化，百分比数值便会随之自动更新。
if(count !== Number(user_number)){
/* 改变样式的宽度 */
nercon.style.width = count+"px";
/* count自加 */
count++;
/* 百分比的显示，保留两位小数 */
text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%";
}else{
return false;
}上述第三个问题（动态计算）在第二个问题的解决过程中已一并涵盖。
代码示例与注意事项
具体代码实现如下：
<!DOCTYPE html>
<!--
aim：csdn example
date：2018-09
author:clearlove
bug:0%
environment:osx
introduce:Progress bar introduction
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.style_input{
width: 3rem;
margin-bottom: 2rem;
}
#context{
height: 1.5rem;
border: 1px solid black;
float: left;
border-radius:10px;
}
#ner_con{
background-color: aqua;
height: 100%;
border-radius:10px;
}
#text_contest{
height: 1.5rem;
width: 3rem;
float: left;
margin-left: 0.3rem;
}
#pro_div{
height: 1.5rem;
width: 3rem;
float: left;
}
</style>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="number" name="" id="user_number" value="" class="style_input"/>
<input type="button" name="" id="" value="生成" οnclick="change()"/>
<div id="">
<div id="context">
<div id="ner_con">
</div>
</div>
<div id="text_contest">
</div>
</div>
<script type="text/javascript">
var count = 1;
var screewidth = document.body.clientWidth;
function change(){
/* 拿到ID以改变样式 */
var nercon = document.getElementById("ner_con");
var context = document.getElementById("context");
var text_contest = document.getElementById("text_contest");
var user_number = $("#user_number").val();
/* 判断一下是不是超过了可见区域 */
if(Number(user_number)>=(screewidth/2)){
console.log(screewidth);
alert("输入过长，请重新输入！");
return false;
}
else{
context.style.width = user_number+"px";
/* 只需要将内部的div的宽度递增就可以了*/
if(count !== Number(user_number)){
/* 改变样式的宽度 */
nercon.style.width = count+"px";
/* count自加 */
count++;
/* 百分比的显示，保留两位小数 */
text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%";
}else{
return false;
}
setTimeout("change()",100);
}
}
</script>
</body>
</html>注意：细心观察源码的读者可能会发现，此处并未进行严格的输入校验。例如，未判断用户输入是否为空便直接触发函数。在实际开发中，请务必补充此类校验逻辑，否则可能导致程序报错。
请确保在页面中正确引入jQuery库。
感谢阅读。
以上就是本文的全部内容，希望能为各位的学习带来帮助。欢迎大家继续关注本站，获取更多技术分享。