jQuery는 비밀번호를 묻는 코드를 구현합니다.
- WBOY원래의
- 2016-05-16 15:50:201184검색
입력한 비밀번호의 길이에 따라 색상 막대가 변경되는 효과를 얻는 방법:
많은 웹사이트 등록 페이지에 이 기능이 있습니다. 사용자가 비밀번호를 입력하면 색상 막대의 길이가 입력된 비밀번호의 길이에 따라 변경되며 색상 막대의 색상도 변경됩니다. 길이는 입력된 비밀번호에 따라 달라지며 일반적으로 비밀번호 강도를 나타내는 데 사용됩니다. 다음은 이 기능을 달성하기 위해 jQuery를 사용하는 방법에 대한 간략한 소개입니다. 코드 예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
.box {
width: 200px;
height: 10px;
border: 1px solid #CCC;
margin-left: 58px;
}
.bg {
height: 10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytext").keyup(function(){
var textMax=20;
$("#mytext").attr("maxlength",textMax);
var len=$("#mytext").val().length;
var boxlen=$(".box").css("width");
var inputlength=$("#mytext").val().length;
var bgwidth=(inputlength/textMax)*parseInt(boxlen);
$(".bg").css("width",bgwidth);
if(bgwidth<60)
{
$(".bg").css("background-color","#F00");
}
else if(60<=bgwidth && bgwidth<120)
{
$(".bg").css("background-color","#F90");
}
else if(bgwidth>=120)
{
$(".bg").css("background-color","#6F3");
}
})
})
</script>
</head>
<body>
<div>用户名:
<input type="text" name="username" id="mytext" />
</div>
<div class="box">
<div class="bg"></div>
</div>
</body>
</html>
위 코드는 기본적으로 텍스트 상자에 내용을 입력할 때 아래 배경 막대의 길이와 색상이 변경됩니다. 이 효과를 얻는 방법에 대한 간략한 소개는 다음과 같습니다.
1. 여기서는 keyup 이벤트를 사용합니다. 즉, 텍스트를 입력한 후 키를 놓으면 이 이벤트가 트리거됩니다. 이런 식으로 텍스트가 입력될 때마다 해당 배경의 길이와 색상이 변경됩니다. 바가 조정됩니다.
2.var textMax=20은 텍스트 텍스트 상자의 최대 입력 길이를 정의하는 데 사용됩니다. $("#mytext").attr("maxlength",textMax)를 통해 텍스트 상자의 maxlength 속성을 설정합니다. 속성 값을 textMax 로 설정합니다.
Three.$(".box").css("width")는 상자 요소의 너비를 반환하고 $("#mytext").val().length는 입력 콘텐츠의 길이를 반환하므로 inputlength /textMax는 현재 입력 요소의 길이와 텍스트 상자의 최대 입력 길이 사이의 비율을 계산할 수 있습니다. 이 비율에 상자 요소의 너비를 곱하여 현재 배경 막대의 길이를 계산합니다. inputlength/textMax)*parseInt (boxlen), 여기서는parseInt() 함수 사용에 특별한 주의를 기울이십시오. 그렇지 않으면 boxlen 값이 $(".box").css("width를 통해 반환되기 때문에 반환 값은 NaN입니다. "), 뒤에 문자열인 "px" 단위가 있습니다.
4. if 문은 현재 배경 막대의 길이를 판단하여 배경 막대의 색상을 결정합니다.
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다