ホームページ > ウェブフロントエンド > jsチュートリアル > モバイルデバイスでの描画ロック解除を実現するための純粋な JavaScript コード_JavaScript スキル

モバイルデバイスでの描画ロック解除を実現するための純粋な JavaScript コード_JavaScript スキル

WBOY
リリース: 2016-05-16 15:36:27
オリジナル
1888 人が閲覧しました

携帯電話デバイスには、誰もがよく知っている画面ロック解除アプリケーションがあり、ユーザーはロック パターンをパスワードとして設定することでデバイスのユーザー インターフェイスをロックできます。ロック インターフェイスは次のとおりです。下に。

レンダリングを以下に示します


JavaScript コード

<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
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート