純JavaScript代碼實(shí)現(xiàn)移動(dòng)設(shè)備繪圖解鎖
移動(dòng)手機(jī)設(shè)備上有一個(gè)屏幕解鎖的應(yīng)用相信大家都不陌生,在移動(dòng)設(shè)備上,用戶可以通過(guò)設(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)證正確后的其他操作,打開(kāi)新的頁(yè)面等。。。
alert("Pattern is correct")
},500); //延遲半秒以照顧視覺(jué)效果
}
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)文章
js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別?
這篇文章主要介紹了js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別,需要的朋友可以參考下2015-11-11
微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒(méi)有實(shí)際名字的函數(shù),匿名函數(shù)(function() {})();是一個(gè)特殊的閉包寫(xiě)法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08
使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化),本文重點(diǎn)給大家介紹基礎(chǔ)的動(dòng)畫(huà)類實(shí)現(xiàn)時(shí)間軸,通過(guò)示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04
自己封裝的javascript事件隊(duì)列函數(shù)版
這篇文章主要介紹了自己封裝的javascript事件隊(duì)列函數(shù)版,兼容了大部份瀏覽器,需要的朋友可以參考下2014-06-06
JS與jQuery遍歷Table所有單元格內(nèi)容的方法
這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實(shí)例形式分別描述了JavaScript與jQuery實(shí)現(xiàn)遍歷table單元格的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12

