純JavaScript代碼實現(xiàn)移動設(shè)備繪圖解鎖
更新時間：2015年10月16日 09:59:11 投稿：mrr
為了個人信息的安全起見，移動設(shè)備上都有個繪圖解鎖，使用起來非常簡單，代碼是怎么實現(xiàn)的呢？下面小編給大家介紹js實現(xiàn)移動設(shè)備繪圖解鎖，需要的朋友可以參考下
移動手機設(shè)備上有一個屏幕解鎖的應(yīng)用相信大家都不陌生，在移動設(shè)備上，用戶可以通過設(shè)置鎖定圖案作為密碼對設(shè)備用戶界面進(jìn)行鎖定，鎖定界面如下圖所示。
效果圖如下所示
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代碼實現(xiàn)移動設(shè)備繪圖解鎖，當(dāng)然這是核心代碼，其他的還需要小伙伴們根據(jù)自己的需求自行發(fā)揮。希望本文分享能給大家?guī)椭?/p>
相關(guān)文章
本文介紹了如何使用JavaScript對象添加屬性和方法,通過實例演示了如何給對象添加屬性,以及如何在對象中定義方法,具有一定的參考價值,感興趣的可以了解一下2023-08-08
JavaScript讀取中文cookie時的亂碼問題的解決方法
讀取中文cookie時出現(xiàn)亂碼，下面是具體的解決方法，大家以后使用過程中，盡量不要用中文。2009-10-10
下面小編就為大家?guī)硪黄猨s判斷某個字符出現(xiàn)的次數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要教大家簡單實現(xiàn)Bootstrap標(biāo)簽頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
web-view是小程序提供的一個可以直連h5頁面的組件,只要傳遞一個h5頁面的地址,就可以在小程序里直接打開預(yù)覽該h5頁面,這篇文章主要給大家介紹了微信小程序webView嵌入H5的相關(guān)資料,需要的朋友可以參考下2021-07-07
下面小編就為大家分享一篇js 判斷一個數(shù)字是不是2的n次方冪的實例，具有很好的參考價值，希望對大家有所幫助2017-11-11
JS模擬實現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個數(shù)組方法，這些方法只有在ie9及以上瀏覽器中可以被使用，下面是對于這些方法的模擬實現(xiàn)簡單介紹下，需要的朋友參考下2017-03-03
js實現(xiàn)的實時柱狀圖,非常有創(chuàng)意的想法。2008-10-10
這篇文章主要介紹了微信小程序-可移動菜單的實現(xiàn)過程詳解，我們可以經(jīng)常看到手機app里有的菜單欄是懸浮在首頁的，用戶可以拖動和點擊菜單欄進(jìn)行交互，今天就教大家利用小程序的控件，,需要的朋友可以參考下2019-06-06
JS中showModalDialog 的使用解析，需要的朋友可以參考一下2013-04-04