html5手机端两款不同皮肤手势密码插件【原创

来源:https://www.sucaihuo.com/js/1318.html 2017-02-06 22:43浏览(2137) 收藏

基于canvas开发的手势密码插件,原生适配各种尺寸的APP或手机wap屏幕,html5触屏滑动的手势密码演示demo
html5手机端两款不同皮肤手势密码插件
分类:手机特效 > 触屏滑动 难易:高级
查看演示 下载资源 下载积分: 120 积分

手势插件html代码使用方法

<div id="password"></div>
<script src="yourPath/gesture.password.js"></script>
<script type="text/javascript">
    var gp = new GesturePassword('password');
</script>

默认淡色

var p = new GesturePassword('gesturePassword', {
    circle: {
        sizeScale: 0.9,
        default: {
            strokeStyle: '#D5DBE8'
        }
    },
    line: {
        lineWidth: 3,
        default: {
            strokeStyle: '#D5DBE8'
        }

    },
    dot: {
        size: 8,
        default: {
            fillStyle: '#D5DBE8'
        }
    }
});
var msg = document.getElementById('message'), password;
p.on('complete', function(result) {
    if (password) {
        if (password === result) {
            msg.innerHTML = '密码设置成功';
            msg.classList.add('right')
            p.setRight();
        } else {
            msg.innerHTML = '两次密码不一致';
            msg.classList.add('error')
            p.setWrong();
        }

        setTimeout(function() {
            p.reset();
            msg.innerHTML = '';
            msg.className = '';
            password = false;
        }, 1500);

    } else {//第一次输入时
        password = result;
        msg.innerHTML = '请再次输入密码'
        setTimeout(function() {
            p.reset();
        }, 500);
    }
});

深蓝色

var p = new GesturePassword('gesturePassword'),
        msg = document.getElementById('message'), password;
p.on('complete', function(result) {
    if (password) {
        if (password === result) {
            msg.innerHTML = '密码设置成功';
            msg.classList.add('right')
            p.setRight();
        } else {
            msg.innerHTML = '两次密码不一致';
            msg.classList.add('error')
            p.setWrong();
        }

        setTimeout(function() {
            p.reset();
            msg.innerHTML = '';
            msg.className = '';
            password = false;
        }, 1500);

    } else {//第一次输入时
        password = result;
        msg.innerHTML = '请再次输入密码'
        setTimeout(function() {
            p.reset();
        }, 500);
    }
});

密码从上到下,从左到右依次是数字1-9。如上面的【示例图片1】对应的密码是:12357。

标签: 密码手势
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/1318.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2