純JavaScript代碼實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖
更新時(shí)間：2015年10月16日 09:59:11 投稿：mrr
為了個(gè)人信息的安全起見，移動(dòng)設(shè)備上都有個(gè)繪圖解鎖，使用起來非常簡(jiǎn)單，代碼是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹js實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖，需要的朋友可以參考下
移動(dòng)手機(jī)設(shè)備上有一個(gè)屏幕解鎖的應(yīng)用相信大家都不陌生，在移動(dòng)設(shè)備上，用戶可以通過設(shè)置鎖定圖案作為密碼對(duì)設(shè)備用戶界面進(jìn)行鎖定，鎖定界面如下圖所示。
效果圖如下所示
JavaScript Code
<script>
$("#gesturepwd").GesturePasswd({
backgroundColor:"#2980B9", //背景色
color:"#FFFFFF", //主要的控件顏色
roundRadii:50, //大圓點(diǎn)的半徑
pointRadii:12, //大圓點(diǎn)被選中時(shí)顯示的圓心的半徑
space:60, //大圓點(diǎn)之間的間隙
width:480, //整個(gè)組件的寬度
height:480, //整個(gè)組件的高度
lineColor:"#ECF0F1", //用戶劃出線條的顏色
zindex :100 //整個(gè)組件的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(){
//密碼驗(yàn)證正確后的其他操作，打開新的頁面等。。。
alert("Pattern is correct")
},500); //延遲半秒以照顧視覺效果
}
else{
$("#gesturepwd").trigger("passwdWrong");
//密碼驗(yàn)證錯(cuò)誤后的其他操作。。。
}
});
</script>
以上代碼也很簡(jiǎn)單吧，純js代碼實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖，當(dāng)然這是核心代碼，其他的還需要小伙伴們根據(jù)自己的需求自行發(fā)揮。希望本文分享能給大家?guī)椭?/p>
相關(guān)文章
本文介紹了如何使用JavaScript對(duì)象添加屬性和方法,通過實(shí)例演示了如何給對(duì)象添加屬性,以及如何在對(duì)象中定義方法,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
JavaScript讀取中文cookie時(shí)的亂碼問題的解決方法
讀取中文cookie時(shí)出現(xiàn)亂碼，下面是具體的解決方法，大家以后使用過程中，盡量不要用中文。2009-10-10
js判斷某個(gè)字符出現(xiàn)的次數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s判斷某個(gè)字符出現(xiàn)的次數(shù)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
簡(jiǎn)單實(shí)現(xiàn)Bootstrap標(biāo)簽頁
這篇文章主要教大家簡(jiǎn)單實(shí)現(xiàn)Bootstrap標(biāo)簽頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
web-view是小程序提供的一個(gè)可以直連h5頁面的組件,只要傳遞一個(gè)h5頁面的地址,就可以在小程序里直接打開預(yù)覽該h5頁面,這篇文章主要給大家介紹了微信小程序webView嵌入H5的相關(guān)資料,需要的朋友可以參考下2021-07-07
js 判斷一個(gè)數(shù)字是不是2的n次方冪的實(shí)例
下面小編就為大家分享一篇js 判斷一個(gè)數(shù)字是不是2的n次方冪的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助2017-11-11
JS模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個(gè)數(shù)組方法，這些方法只有在ie9及以上瀏覽器中可以被使用，下面是對(duì)于這些方法的模擬實(shí)現(xiàn)簡(jiǎn)單介紹下，需要的朋友參考下2017-03-03
Javascript實(shí)時(shí)柱狀圖實(shí)現(xiàn)代碼
js實(shí)現(xiàn)的實(shí)時(shí)柱狀圖,非常有創(chuàng)意的想法。2008-10-10
微信小程序-可移動(dòng)菜單的實(shí)現(xiàn)過程詳解
這篇文章主要介紹了微信小程序-可移動(dòng)菜單的實(shí)現(xiàn)過程詳解，我們可以經(jīng)?？吹绞謾C(jī)app里有的菜單欄是懸浮在首頁的，用戶可以拖動(dòng)和點(diǎn)擊菜單欄進(jìn)行交互，今天就教大家利用小程序的控件，,需要的朋友可以參考下2019-06-06
JS中showModalDialog 的使用解析，需要的朋友可以參考一下2013-04-04