DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 純JavaScript代碼實現移動設備繪圖解鎖
純JavaScript代碼實現移動設備繪圖解鎖
編輯:關於JavaScript     

移動手機設備上有一個屏幕解鎖的應用相信大家都不陌生,在移動設備上,用戶可以通過設置鎖定圖案作為密碼對設備用戶界面進行鎖定,鎖定界面如下圖所示。

效果圖如下所示


JavaScript Code

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

以上代碼也很簡單吧,純js代碼實現移動設備繪圖解鎖,當然這是核心代碼,其他的還需要小伙伴們根據自己的需求自行發揮。希望本文分享能給大家幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved