recherche

Maison  >  Article  >  interface Web  >  jQuery implémente le code pour demander le mot de passe strong_jquery

jQuery implémente le code pour demander le mot de passe strong_jquery

WBOY
WBOYoriginal
2016-05-16 15:50:201163parcourir

Comment obtenir l'effet de changement de la barre de couleur en fonction de la longueur du mot de passe saisi :

De nombreuses pages d'inscription de sites Web ont cette fonction. Lorsque l'utilisateur saisit un mot de passe, une barre de couleur apparaîtra en dessous. La longueur de la barre de couleur changera avec la longueur du mot de passe saisi, et la couleur de la barre de couleur changera également. être basé sur le mot de passe saisi. La longueur varie et est généralement utilisée pour indiquer la force du mot de passe. Voici une brève introduction sur la façon d'utiliser jQuery pour réaliser cette fonction. L'exemple de code est le suivant :

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

Le code ci-dessus implémente essentiellement les fonctions dont nous avons besoin. Lors de la saisie de contenu dans la zone de texte, la longueur et la couleur de la barre d'arrière-plan ci-dessous changeront en conséquence. Voici une brève introduction sur la façon d'obtenir cet effet :

1. L'événement keyup est utilisé ici, c'est-à-dire qu'après la saisie du texte, cet événement sera déclenché lorsque la touche est relâchée. De cette façon, chaque fois qu'un morceau de texte est saisi, la longueur et la couleur de l'arrière-plan correspondant. la barre sera ajustée.

2.var textMax=20 est utilisé pour définir la longueur maximale d'entrée de la zone de texte. Définissez l'attribut maxlength de la zone de texte via $("#mytext").attr("maxlength",textMax), et. définissez la valeur de l'attribut sur textMax .

Three.$(".box").css("width") renvoie la largeur de l'élément box, $("#mytext").val().length renvoie la longueur du contenu d'entrée, donc inputlength /textMax peut être Calculer le rapport entre la longueur de l'élément d'entrée actuel et la longueur d'entrée maximale de la zone de texte. Multipliez ce rapport par la largeur de l'élément de boîte pour calculer la longueur de la barre d'arrière-plan actuelle. inputlength/textMax)*parseInt (boxlen), faites particulièrement attention à l'utilisation de la fonction parseInt() ici, sinon la valeur de retour est NaN, car la valeur boxlen est renvoyée via $(".box").css("width "), qui est une chaîne suivie de Il y a des unités "px".

4. L'instruction if détermine la couleur de la barre d'arrière-plan en jugeant la longueur de la barre d'arrière-plan actuelle.

Ce qui précède représente l'intégralité du contenu de cet article, j'espère que vous l'aimerez tous

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Le plug-in jQuery windowScroll implémente les effets de défilement sur un seul écran_jqueryArticle suivant：Le plug-in jQuery windowScroll implémente les effets de défilement sur un seul écran_jquery

Articles Liés

Voir plus