javascript - 进度条(Javascript)
问题描述
我希望进度条正常工作。在每个输入(名字、姓氏、全名、输入密码、重新输入密码)上,进度应该从 0% 变为 20%、40%、60%、80%、100%。如果输入字段为空白,则对于每个输入,它不会从进度条中增加 20%。您可以在网页顶部看到进度条。
*{margin:0; padding:0;}
#Black{
width:100%;
height:100%;
background:black;
color:white;
position:fixed;
}
#White{
width:600px;
height:auto;
background:rgba(255,255,255,0.1);
color:white;
margin:100px auto;
}
#Prog{
width:100%;
height:20px;
background:rgba(255,255,255,0.1);
color:white;
}
#Pro{
width:0%;
height:20px;
background:linear-gradient(to bottom, rgba(33,150,243,1) 50%, rgba(33,150,243,0.9) 50%);
}
#FirstName::selection, #LastName::selection, #FullName::selection, #PSW::selection, #MPSW::selection{
background:white;
color:black;
}
#FirstName, #LastName, #FullName, #PSW, #MPSW{
width:400px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
margin:20px 80px;
border:2px solid white;
}
#FirstName::placeholder, #LastName::placeholder, #FullName::placeholder, #PSW::placeholder, #MPSW::placeholder{
user-select:none;
}
#Register{
width:200px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
border:2px solid white;
margin-left:200px;
margin-bottom:20px;
cursor:pointer;
}
#Register:hover{
background:linear-gradient(to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50%);
color:white;
border:2px solid white;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
<div id="Black">
<div id="Prog">
<div id="Pro">0%</div>
</div>
<div id="White">
<form action="http://www.freelancer.com" method="POST">
<input type="text" placeholder=" First Name" id="FirstName"/>
<input type="text" placeholder=" Last Name" id="LastName"/>
<input type="text" placeholder=" Full Name" id="FullName"/>
<input type="text" placeholder=" Type your password" id="PSW"/>
<input type="text" placeholder=" Retype your password" id="MPSW"/>
<input type="submit" value="Register" id="Register"/>
</form>
</div>
<script>
var prog=document.getElementById("Prog");
var pro=document.getElementById("Pro");
var fname=document.getElementById("FirstName");
var lname=document.getElementById("LastName");
var full=document.getElementById("FullName");
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("FullName").value="";
document.getElementById("PSW").value="";
document.getElementById("MPSW").value="";
var width=0;
var i;
</script>
</div>
</body>
</html>
谢谢
解决方案
keypress
您可以为每个s的事件添加一个事件侦听器,input
以将进度提高 20%(仅在输出字符时触发按键)。
您还可以为keydown
每个input
s 的事件添加一个事件侦听器,并检查 keyCode 是否为 8(退格)以及值的当前长度是否input
为1
(在这种情况下该字符将被删除)以删除 20%从进度。
JSFiddle:http: //jsfiddle.net/p0kg4sb9/13/embedded/result
*{margin:0; padding:0;}
body{
overflow-y: auto;
}
#Black{
width:100%;
height:100%;
background:black;
color:white;
position:fixed;
}
#White{
width:600px;
height:auto;
background:rgba(255,255,255,0.1);
color:white;
margin:100px auto;
}
#Prog{
width:100%;
height:20px;
background:rgba(255,255,255,0.1);
color:white;
}
#Pro{
width:0%;
height:20px;
background:linear-gradient(to bottom, rgba(33,150,243,1) 50%, rgba(33,150,243,0.9) 50%);
}
#FirstName::selection, #LastName::selection, #FullName::selection, #PSW::selection, #MPSW::selection{
background:white;
color:black;
}
#FirstName, #LastName, #FullName, #PSW, #MPSW{
width:400px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
margin:20px 80px;
border:2px solid white;
}
#FirstName::placeholder, #LastName::placeholder, #FullName::placeholder, #PSW::placeholder, #MPSW::placeholder{
user-select:none;
}
#Register{
width:200px;
height:auto;
padding:20px;
background:black;
color:white;
outline:none;
border:2px solid white;
margin-left:200px;
margin-bottom:20px;
cursor:pointer;
}
#Register:hover{
background:linear-gradient(to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50%);
color:white;
border:2px solid white;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
<div id="Black">
<div id="Prog">
<div id="Pro">0%</div>
</div>
<div id="White">
<form action="http://www.freelancer.com" method="POST">
<input type="text" placeholder=" First Name" id="FirstName"/>
<input type="text" placeholder=" Last Name" id="LastName"/>
<input type="text" placeholder=" Full Name" id="FullName"/>
<input type="text" placeholder=" Type your password" id="PSW"/>
<input type="text" placeholder=" Retype your password" id="MPSW"/>
<input type="submit" value="Register" id="Register"/>
</form>
</div>
<script>
var prog=document.getElementById("Prog");
var pro=document.getElementById("Pro");
var progress = 0;
var firstNameInputted = false;
var lastNameInputted = false;
var fullNameInputted = false;
var pswInputted = false;
var mpswInputted = false;
var firstName = document.getElementById("FirstName");
firstName.addEventListener("keypress", function(e){
if(!firstNameInputted){
firstNameInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
firstName.addEventListener("keydown", function(e){
if(e.keyCode == 8&&firstName.value.length==1){
firstNameInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var lastName = document.getElementById("LastName");
lastName.addEventListener("keypress", function(e){
if(!lastNameInputted){
lastNameInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
lastName.addEventListener("keydown", function(e){
if(e.keyCode==8&&lastName.value.length==1){
lastNameInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var fullName = document.getElementById("FullName");
fullName.addEventListener("keypress", function(e){
if(!fullNameInputted){
fullNameInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
fullName.addEventListener("keydown", function(e){
if(e.keyCode==8&&fullName.value.length==1){
fullNameInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var psw = document.getElementById("PSW");
psw.addEventListener("keypress", function(e){
if(!pswInputted){
pswInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
psw.addEventListener("keydown", function(e){
if(e.keyCode==8&&psw.value.length==1){
pswInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
var mpsw = document.getElementById("MPSW");
mpsw.addEventListener("keypress", function(e){
if(!mpswInputted){
mpswInputted = true;
progress += 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
mpsw.addEventListener("keydown", function(e){
if(e.keyCode==8&&mpsw.value.length==1){
mpswInputted = false;
progress -= 20;
pro.textContent = progress + "%";
pro.style.width = progress + "%";
}
});
</script>
</div>
</body>
</html>
推荐阅读
- amazon-s3 - 使用 S3 的 api 网关代理从 S3 读取羽毛文件
- solidity - 即使我有一个应付回退功能来接收 eth,但当我在不发送 eth 的情况下进行部署时,它仍然可以正常工作
- arrays - 如何使用数组搜索内爆数组?
- javascript - 使用 state 或 material-top-tab,最佳实践是什么?
- python - 只能从 TKinter 窗口中清除一项
- firefox - 如何在 Firefox(applescript)中“等待网页加载”?
- python - 如何使用 Flask/python 在特定时间间隔内记录物联网数据
- python - 试图让一个不和谐的机器人在启动时加入
- plot - 为什么 Plot 在 Octave 中隐藏另一个 Plot?
- c# - menustrip 项目消失了,但在我的 Designer.cs 上仍然可用