Maison > interface Web > js tutoriel > le corps du texte

Code JavaScript pur pour réaliser le déverrouillage des dessins sur les appareils mobiles_compétences Javascript

WBOY
Libérer: 2016-05-16 15:36:27
original
1827 Les gens l'ont consulté

Il existe une application de déverrouillage d'écran sur les appareils de téléphonie mobile que je pense que tout le monde connaît. Sur les appareils mobiles, les utilisateurs peuvent verrouiller l'interface utilisateur de l'appareil en définissant un modèle de verrouillage comme mot de passe. L'interface de verrouillage est comme indiqué sur la figure. ci-dessous.

Le rendu est présenté ci-dessous


Code JavaScript

<script> 
 $("#gesturepwd").GesturePasswd({ 
backgroundColor:"#2980B9", //背景色 
color:"#FFFFFF",  //主要的控件颜色 
roundRadii:50,  //大圆点的半径 
pointRadii:12, //大圆点被选中时显示的圆心的半径 
space:60, //大圆点之间的间隙 
width:480,  //整个组件的宽度 
height:480, //整个组件的高度 
lineColor:"#ECF0F1",  //用户划出线条的颜色 
zindex :100 //整个组件的css z-index属性 
}); 
 $("#gesturepwd").on("hasPasswd",function(e,passwd){ 
  var result; 
 if(passwd == "1235789"){ 
  result=true; 
 } 
  else { 
   result=false; 
  } 
  if(result == true){ 
   $("#gesturepwd").trigger("passwdRight"); 
   setTimeout(function(){ 
    //密码验证正确后的其他操作,打开新的页面等。。。 
    alert("Pattern is correct") 
   },500); //延迟半秒以照顾视觉效果 
  } 
  else{ 
   $("#gesturepwd").trigger("passwdWrong"); 
   //密码验证错误后的其他操作。。。 
  } 
 }); 
</script> 
Copier après la connexion

Le code ci-dessus est également très simple. Le code Pure js réalise le déverrouillage des dessins sur les appareils mobiles. Bien sûr, c'est le code de base. D'autres doivent être utilisés par des amis en fonction de leurs propres besoins. J'espère que partager cet article pourra aider tout le monde.

Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!