suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert Code zur Eingabe des Kennworts „streng_jquery“.

jQuery implementiert Code zur Eingabe des Kennworts „streng_jquery“.

WBOY
WBOYOriginal
2016-05-16 15:50:201163Durchsuche

So erzielen Sie den Effekt, dass sich der Farbbalken mit der Länge des eingegebenen Passworts ändert:

Viele Website-Registrierungsseiten verfügen über diese Funktion. Wenn der Benutzer ein Passwort eingibt, wird unten eine Farbleiste angezeigt, die sich mit der Länge des eingegebenen Passworts ändert Die Länge variiert und wird im Allgemeinen zur Angabe der Passwortstärke verwendet. Hier finden Sie eine kurze Einführung in die Verwendung von jQuery zum Erreichen dieser Funktion. Das Codebeispiel lautet wie folgt:

<!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>

Der obige Code implementiert grundsätzlich die von uns benötigten Funktionen. Bei der Eingabe von Inhalten in das Textfeld ändern sich Länge und Farbe der Hintergrundleiste unten entsprechend. Hier finden Sie eine kurze Einführung, wie Sie diesen Effekt erzielen:

1. Hier wird das Keyup-Ereignis verwendet, das heißt, nach der Texteingabe wird dieses Ereignis ausgelöst, wenn die Taste losgelassen wird. Auf diese Weise werden bei jeder Eingabe eines Textstücks die Länge und die Farbe des entsprechenden Hintergrunds angezeigt Balken wird angepasst.

2.var textMax=20 wird verwendet, um die maximale Eingabelänge des Textfelds über $("#mytext").attr("maxlength",textMax) festzulegen Setzen Sie den Attributwert auf textMax.

Three.$(".box").css("width") gibt die Breite des Boxelements zurück, $("#mytext").val().length gibt die Länge des Eingabeinhalts zurück, also die Eingabelänge /textMax kann sein: Berechnen Sie das Verhältnis zwischen der Länge des aktuellen Eingabeelements und der maximalen Eingabelänge des Textfelds. Multiplizieren Sie dieses Verhältnis mit der Breite des Boxelements, um die Länge des aktuellen Hintergrundbalkens zu berechnen. inputlength/textMax)*parseInt (boxlen), achten Sie hier besonders auf die Verwendung der Funktion parseInt(), andernfalls ist der Rückgabewert NaN, da der Boxlen-Wert über $(".box").css("width" zurückgegeben wird "), das ist eine Zeichenfolge, gefolgt von Es gibt „px“-Einheiten.

4. Die if-Anweisung bestimmt die Farbe der Hintergrundleiste, indem sie die Länge der aktuellen Hintergrundleiste beurteilt.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das jQuery-Plug-in windowScroll implementiert Single-Screen-Scrolling-Effekte_jqueryNächster Artikel：Das jQuery-Plug-in windowScroll implementiert Single-Screen-Scrolling-Effekte_jquery

In Verbindung stehende Artikel

Mehr sehen