jQuery는 비밀번호를 묻는 코드를 구현합니다.-JS 튜토리얼-php.cn

jQuery는 비밀번호를 묻는 코드를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:50:20

원래의

1183명이 탐색했습니다.

입력한 비밀번호의 길이에 따라 색상 막대가 변경되는 효과를 얻는 방법:

많은 웹사이트 등록 페이지에 이 기능이 있습니다. 사용자가 비밀번호를 입력하면 색상 막대의 길이가 입력된 비밀번호의 길이에 따라 변경되며 색상 막대의 색상도 변경됩니다. 길이는 입력된 비밀번호에 따라 달라지며 일반적으로 비밀번호 강도를 나타내는 데 사용됩니다. 다음은 이 기능을 달성하기 위해 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 문은 현재 배경 막대의 길이를 판단하여 배경 막대의 색상을 결정합니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다