ホームページ >ウェブフロントエンド >htmlチュートリアル >jqueryはジェスチャーロック解除のソースコードを実装します
jqueryはジェスチャーロック解除のソースコードを実装します
- 韦小宝オリジナル
- 2017-11-18 10:17:062276ブラウズ
ジェスチャーによるロック解除は、私たちにとっては間違いなく非常に一般的なものです。 コード: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP中文网</title>
</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>
無料で入手して勉強してください!さらに優れたソース コードは、
PHP 中国語 Web サイト
関連する推奨事項: 猫の顔の移動を実装する
ネイティブ JSドロップダウンリストフレームを実装
jsのオリジナルサウンドを実装して簡単なWeChatチャット機能を実装
以上がjqueryはジェスチャーロック解除のソースコードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。