PuzzleVerificationCode

功能描述

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

快速使用

##1.引入CSS文件

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

##2.引入JS文件

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

##3.插件初始化使用

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

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

PuzzleVerificationCode.init(document.getElementById('captcha'), function () {
    document.getElementById('msg').innerHTML = '验证成功！'
},function () {
    document.getElementById('msg').innerHTML = '验证失败！'
})
  • puzzlevercode.js getRandomImg()方法说明

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

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

特别说明

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

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