进度条（Javascript）

我希望进度条工作。在每次输入（名字、姓氏、全名、键入密码、重新键入密码）时，进度应从0%变为20%、40%、60%、80%、100%。如果输入字段为空，则不会从进度条中为每个输入添加20%。您可以在网页顶部看到进度条

*{margin:0；padding:0；}
#黑色的{
宽度：100%；
身高：100%；
背景：黑色；
颜色：白色；
位置：固定；
}
#白色的{
宽度：600px；
高度：自动；
背景：rgba（255255,0.1）；
颜色：白色；
保证金：100像素自动；
}	  
#进步{
宽度：100%；
高度：20px；
背景：rgba（255255,0.1）；
颜色：白色；
}
#专业的{
宽度：0%；
高度：20px；
背景：线性梯度（至底部，rgba（33150243,1）50%，rgba（33150243,0.9）50%）；
}
#FirstName:：selection，#LastName:：selection，#FullName:：selection，#PSW:：selection，#MPSW:：selection{
背景：白色；
颜色：黑色；
}
#名、姓、全名、PSW、MPSW{
宽度：400px；
高度：自动；
填充：20px；
背景：黑色；
颜色：白色；
大纲：无；
利润率：20px 80px；
边框：2倍纯白；
}
#名字：：占位符，#姓氏：：占位符，#全名：：占位符，#PSW：：占位符，#MPSW：：占位符{
用户选择：无；
}
#登记册{
宽度：200px；
高度：自动；
填充：20px；
背景：黑色；
颜色：白色；
大纲：无；
边框：2倍纯白；
左边距：200px；
边缘底部：20px；
光标：指针；
}
#寄存器：悬停{
背景：线性梯度（至底部，rgba（33155243,1）50%，rgba（33155243,0.9）50%）；
颜色：白色；
边框：2倍纯白；
}

0%
var prog=document.getElementById（“prog”）；
var pro=document.getElementById（“pro”）；
var fname=document.getElementById（“名字”）；
var lname=document.getElementById（“LastName”）；
var full=document.getElementById（“全名”）；
var psw0=document.getElementById（“PSW”）；
var mpsw0=document.getElementById（“MPSW”）；
var firstname=document.getElementById（“firstname”）.value；
var lastname=document.getElementById（“lastname”）.value；
var fullname=document.getElementById（“fullname”）.value；
var psw=document.getElementById（“psw”）.value；
var mpsw=document.getElementById（“mpsw”）.value；
document.getElementById（“FirstName”）.value=“”；
document.getElementById（“LastName”）.value=“”；
document.getElementById（“全名”）.value=“”；
document.getElementById（“PSW”）.value=“”；
document.getElementById（“MPSW”）.value=“”；
var宽度=0；
var i；

您可以为每个

输入

的

按键

事件添加事件侦听器，以将进度提高20%（按键仅在输出字符时触发）

您还可以为每个

输入
的
keydown
事件添加一个事件侦听器，并检查keyCode是否为8（backspace），以及
输入值的当前长度是否为
1
（在这种情况下，该字符将被删除），以从进度中删除20%

JSFiddle：


*{margin:0；padding:0；}
身体{
溢出y：自动；
}
#黑色的{
宽度：100%；
身高：100%；
背景：黑色；
颜色：白色；
位置：固定；
}
#白色的{
宽度：600px；
高度：自动；
背景：rgba（255255,0.1）；
颜色：白色；
保证金：100像素自动；
}	  
#进步{
宽度：100%；
高度：20px；
背景：rgba（255255,0.1）；
颜色：白色；
}
#专业的{
宽度：0%；
高度：20px；
背景：线性梯度（至底部，rgba（33150243,1）50%，rgba（33150243,0.9）50%）；
}
#FirstName:：selection，#LastName:：selection，#FullName:：selection，#PSW:：selection，#MPSW:：selection{
背景：白色；
颜色：黑色；
}
#名、姓、全名、PSW、MPSW{
宽度：400px；
高度：自动；
填充：20px；
背景：黑色；
颜色：白色；
大纲：无；
利润率：20px 80px；
边框：2倍纯白；
}
#名字：：占位符，#姓氏：：占位符，#全名：：占位符，#PSW：：占位符，#MPSW：：占位符{
用户选择：无；
}
#登记册{
宽度：200px；
高度：自动；
填充：20px；
背景：黑色；
颜色：白色；
大纲：无；
边框：2倍纯白；
左边距：200px；
边缘底部：20px；
光标：指针；
}
#寄存器：悬停{
背景：线性梯度