文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >进度条(Javascript)

问进度条(Javascript)
EN

Stack Overflow用户
提问于 2018-07-30 01:36:27
回答 1查看 117关注 0票数 -2

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

​

代码语言：javascript
复制
*{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;
			   }
代码语言：javascript
复制
<!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>

​

谢谢

javascript
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-30 02:41:24

您可以为每个input的keypress事件添加一个事件侦听器，以将进度提高20% (只有在输出字符时才会触发按键)。

您还可以为每个input的keydown事件添加一个事件侦听器，并检查keyCode是否为8(退格键)，以及input的值的当前长度是否为1 (在这种情况下，该字符将被删除)，以从进度中删除20%。

JSFiddle：http://jsfiddle.net/p0kg4sb9/13/embedded/result

​

代码语言：javascript
复制
*{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;
			   }
代码语言：javascript
复制
<!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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51582893

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档