h5lock

功能描述

html5手势解锁插件H5lock

快速使用

  1. 调用js文件    
  2. <script type="text/javascript" src="libs/H5lock.js"></script>
  4. js调用插件
  5. new H5lock({
  6.     chooseType: 3
  7. }).init();
  10. window.H5lock = function(obj) {
  11.     this.height = obj.height;
  12.     this.width = obj.width;
  13.     this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
  14. };    
  15. H5lock.prototype.storePass = function(psw) {
  16.     if (this.pswObj.step == 1) {
  17.         if (this.checkPass(this.pswObj.fpassword, psw)) {
  18.             this.pswObj.step = 2;
  19.             this.pswObj.spassword = psw;
  20.             document.getElementById('title').innerHTML = '密码保存成功';
  21.             this.drawStatusPoint('#2CFF26');
  22.             window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));
  23.             window.localStorage.setItem('chooseType', this.chooseType);
  24.         } else {
  25.             document.getElementById('title').innerHTML = '两次不一致，重新输入';
  26.             this.drawStatusPoint('red');
  27.             delete this.pswObj.step;
  28.         }
  29.     } else if (this.pswObj.step == 2) {
  30.         if (this.checkPass(this.pswObj.spassword, psw)) {
  31.             document.getElementById('title').innerHTML = '解锁成功';
  32.             this.drawStatusPoint('#2CFF26');
  33.         } else {
  34.             this.drawStatusPoint('red');
  35.             document.getElementById('title').innerHTML = '解锁失败';
  36.         }
  37.     } else {
  38.         this.pswObj.step = 1;
  39.         this.pswObj.fpassword = psw;
  40.         document.getElementById('title').innerHTML = '再次输入';
  41.     }
  42. }
  43. H5lock.prototype.updatePassword = function() {
  44.     window.localStorage.removeItem('passwordxx');
  45.     window.localStorage.removeItem('chooseType');
  46.     this.pswObj = {};
  47.     document.getElementById('title').innerHTML = '绘制解锁图案';
  48.     this.reset();
  49. }
  50. H5lock.prototype.initDom = function() {
  51.     var wrap = document.createElement('div');
  52.     var str = '<h4 id="title" class="title">绘制解锁图案</h4>' + '<a id="updatePassword" style="position: absolute;right: 5px;top: 5px;color:#fff;font-size: 10px;display:none;">重置密码</a>' + '<canvas id="canvas" width="300" height="300" style="display: inline-block;margin-top: 15px;"></canvas>';
  53.     wrap.setAttribute('style', 'position: absolute;top:0;left:0;right:0;bottom:0;');
  54.     wrap.innerHTML = str;
  55.     document.body.appendChild(wrap);
  56. }

特别说明