一個有趣的html5手機鎖

有一段時間，在網上閒逛的時候，看到一個有個好玩的腳本，進行改造後覺得非常有意思，就拿出來分享下

如圖：

按照驗證碼給出的信息，就是手機鎖的密碼啦！

這個是正確的，會提示我驗證通過，如圖：

驗證通過：

然後，就可以接下來的業務處理啦！

這裏是我一部分html代碼:

 <div class="Verification" style="margin-left:40%;">
         <p id="idcode" class="span_family"></p>
         <div id="Verification_code" style="padding-top:15px;border-radius:2.5rem;"></div>
      </div></strong></span></strong></span></strong></span>

主要js部分：

<script type="text/javascript">
$("#Verification_code").GesturePasswd({
backgroundColor:"rgb(54,60,80)",  
color:"#fff",  
roundRadii:40,   
pointRadii:18, 
space:20, 
width:300,   
height:320,  
lineColor:"rgb(51,122,183)",  
zindex :100 
});

$("#Verification_code").on("hasPasswd",function(e,passwd){
$("#idcode").val(passwd);
 result=true;
});


$("#Verification_code").on("hasPasswd",function(e,passwd){
var result;
if(passwd ==text){
result=true;
}
else {
result=false;
}
if(result == true){
  $("#Verification_code").trigger("passwdRight");
  setTimeout(function(){
	alert("驗證通過！");
	$(".Verification").hide();
	$(".addrole-group").show();
  },500); 
}

else{
  $("#Verification_code").trigger("passwdWrong");}
});

</script>

隨機驗證碼生成js部分:

var text;
var codearr =  [ ];
 for(i=0;i<6;i++) {
  arr[i] = parseInt(Math.random()*9+1);
   check();
}
 function check() { 
	 for(j=0;j<codearr .length-1;) {
	 if(codearr [i]==codearr [j]) {
         codearr [i] = parseInt(Math.random()*9+1); 
   j = 0;
   continue;
     }else{
	++j;
     }
   }
}
 text=(codearr .join(''));
$("#idcode").text("驗證碼："+text);
$(".Verification").show();

 }

當然還需要兩個必備js文件，博客沒有上傳js文件的能力，沒辦法了，如果有興趣的朋友，可以私聊找我要哈！