jquery 手勢密碼插件
更新時間：2017年03月17日 14:13:16 作者：sunny紅
本文主要介紹了jquery手勢密碼插件的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="../dist/css/danmuplayer.css" rel="external nofollow" >-->
</head>
<body>
正確的密碼是一個字母“Z”的形狀哦！
<div id="gesturepwd"></div>
</body>
<script src="http://www.jq22.com/demo/jQueryGesturePassword20161102/jquery-2.1.4.min.js"></script>
<script src="http://www.jq22.com/demo/jQueryGesturePassword20161102/src/jquery.gesture.password.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
$("#gesturepwd").GesturePasswd({
backgroundColor:"#252736", //背景色
color:"#FFFFFF", //主要的控件顏色
roundRadii:25, //大圓點的半徑
pointRadii:6, //大圓點被選中時顯示的圓心的半徑
space:30, //大圓點之間的間隙
width:240, //整個組件的寬度
height:240, //整個組件的高度
lineColor:"#00aec7", //用戶劃出線條的顏色
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("密碼正確！")
},500); //延遲半秒以照顧視覺效果
}
else{
$("#gesturepwd").trigger("passwdWrong");
//密碼驗證錯誤后的其他操作。。。
}
});
</script>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jquery驗證表單仿Toast提示效果,實現(xiàn)代碼簡單易懂，非常不錯，需要的朋友可以參考下2017-03-03
基于jQuery實現(xiàn)搜索關(guān)鍵字自動匹配功能
這篇文章主要介紹了基于jQuery實現(xiàn)搜索關(guān)鍵字自動匹配功能，自動匹配搜索關(guān)鍵詞功能廣泛應(yīng)用到搜索引擎當中，感興趣的小伙伴們可以參考一下2015-10-10
jquery實現(xiàn)html頁面 div 假分頁有原理有代碼
大概原理就是填充后div的總高度 （1000px） 顯示高度（100px） 則頁面總數(shù)為10頁 。當查看第二頁時，顯示的div高度為100 - 200之間，以此類推2014-09-09
使用jQuery給Table動態(tài)增加行、清空table的方法
這篇文章主要介紹了使用jQuery給Table動態(tài)增加行、清空table的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09 
很多朋友對jquery select的操作很有興趣，但網(wǎng)上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。
2010-05-05 
jquery的ajax從純真網(wǎng)(cz88.net)獲取IP地址對應(yīng)地區(qū)名
使用jquery的ajax，輕松從純真網(wǎng)(cz88.net)獲取IP地址對應(yīng)地區(qū)名
2009-12-12 
本文給大家分享的是一款基于jQuery制作的多功能的輪播幻燈插件，支持多種配置，十分的實用，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04 
jQuery 技巧，以前發(fā)布了很多了，具體的可以參考腳本之家以前發(fā)布的文章。
2010-04-04 
這篇文章主要為大家詳細介紹了jquery實現(xiàn)點擊彈出對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02