h5lock

功能描述

html5手势解锁插件H5lock

快速使用

调用js文件	
<script type="text/javascript" src="libs/H5lock.js"></script>

js调用插件
new H5lock({
    chooseType: 3
}).init();


window.H5lock = function(obj) {
    this.height = obj.height;
    this.width = obj.width;
    this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
};	
H5lock.prototype.storePass = function(psw) {
    if (this.pswObj.step == 1) {
        if (this.checkPass(this.pswObj.fpassword, psw)) {
            this.pswObj.step = 2;
            this.pswObj.spassword = psw;
            document.getElementById('title').innerHTML = '密码保存成功';
            this.drawStatusPoint('#2CFF26');
            window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));
            window.localStorage.setItem('chooseType', this.chooseType);
        } else {
            document.getElementById('title').innerHTML = '两次不一致，重新输入';
            this.drawStatusPoint('red');
            delete this.pswObj.step;
        }
    } else if (this.pswObj.step == 2) {
        if (this.checkPass(this.pswObj.spassword, psw)) {
            document.getElementById('title').innerHTML = '解锁成功';
            this.drawStatusPoint('#2CFF26');
        } else {
            this.drawStatusPoint('red');
            document.getElementById('title').innerHTML = '解锁失败';
        }
    } else {
        this.pswObj.step = 1;
        this.pswObj.fpassword = psw;
        document.getElementById('title').innerHTML = '再次输入';
    }
}
H5lock.prototype.updatePassword = function() {
    window.localStorage.removeItem('passwordxx');
    window.localStorage.removeItem('chooseType');
    this.pswObj = {};
    document.getElementById('title').innerHTML = '绘制解锁图案';
    this.reset();
}
H5lock.prototype.initDom = function() {
    var wrap = document.createElement('div');
    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>';
    wrap.setAttribute('style', 'position: absolute;top:0;left:0;right:0;bottom:0;');
    wrap.innerHTML = str;
    document.body.appendChild(wrap);
}

特别说明

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18