PuzzleVerificationCode

功能描述

本模块是移动端滑动拼图验证码效果,实现类似QQ等图片的验证码效果,滑动进行拼图验证是否成功,图片随机获取,可修改大小。

快速使用

1.引入CSS文件

  1. <link rel="stylesheet" href="css/puzzlevercode.css">

2.引入JS文件

  1.   <script type="text/javascript" src="js/puzzlevercode.js"></script>

3.模块初始化使用

  • PuzzleVerificationCode.init(element, success, fail)方法说明

    element:要操作的对象 success:验证成功回调函数 fail:验证失败回调函数

    1. PuzzleVerificationCode.init(document.getElementById('captcha'), function () {
    2.   document.getElementById('msg').innerHTML = '验证成功！'
    3. },function () {
    4.   document.getElementById('msg').innerHTML = '验证失败！'
    5. })

  • puzzlevercode.js getRandomImg()方法说明

    getRandomImg()方法返回一张随机产生的图片 300是图片宽度,150是图片高度,自己可定义图片大小

    1.    function getRandomImg() {
    2.   return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
    3. }

特别说明

详细用法见index.html,具体设置参考puzzlevercode.js