純JavaScript代碼實現(xiàn)移動設(shè)備繪圖解鎖
更新時間：2015年10月16日 09:59:11 投稿：mrr
為了個人信息的安全起見，移動設(shè)備上都有個繪圖解鎖，使用起來非常簡單，代碼是怎么實現(xiàn)的呢？下面小編給大家介紹js實現(xiàn)移動設(shè)備繪圖解鎖，需要的朋友可以參考下
移動手機(jī)設(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)文章
js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別?
這篇文章主要介紹了js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了原生js編寫的autoComplete插件，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
判斷是否全是中文的腳本2008-09-09
這篇文章主要介紹了如何選擇適合你的JavaScript框架，如何選擇一個高效的JS框架經(jīng)驗之談。2017-11-11
深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實際名字的函數(shù)，匿名函數(shù)(function() {})();是一個特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08
使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化),本文重點給大家介紹基礎(chǔ)的動畫類實現(xiàn)時間軸，通過示例代碼給大家介紹的很詳細(xì)，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了詳解JavaScript的另類寫法的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了自己封裝的javascript事件隊列函數(shù)版,兼容了大部份瀏覽器,需要的朋友可以參考下2014-06-06
JS與jQuery遍歷Table所有單元格內(nèi)容的方法
這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實例形式分別描述了JavaScript與jQuery實現(xiàn)遍歷table單元格的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12