手势插件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。