Java爱好者 + 关注

签名:哈哈哈

网站滑动验证插件下载及使用方法

发表于 10个月前   3285次查看    5评论  43 赞

在前几天做了短信发送的注册功能,然后考虑到会存在短信轰炸的可能性,毕竟一条短信不便宜呢,所以为了避免出现这种情况,就做了一个发送短信前滑动验证的功能,可以判断是否为人为操作,下面说说网站滑动验证插件及使用方法

QQ截图20180711121006.png

首先插件长这样,下载地址-->canvas滑动验证码插件

然后就是我对源码进行了重新开发,已经全面适配移动端,费了挺大劲的,也是因为自己才疏学浅把,很多东西都没见过,通过这个真的又学到了很多东西。


至于这个插件的使用就具体说说

1、打开index.html,会发现我都给你引入了,如果要放到自己的工程里,就引入下面这些就行啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link rel="stylesheet" href="jigsaw.css">
<script src="jigsaw.js"></script>
<div id="captcha" style="position: relative;"></div>
  <div id="msg"></div>
<script src="jigsaw.js"></script>
<script type="text/javascript">
 
function delay(){
$("#msg").html("验证成功");
 
}
 
</script>
<script>
  jigsaw.init(document.getElementById('captcha'),function () {
    //验证成功后的事件自定义
    delay()
  },function () {
//验证失败后的事件自定义
  })
</script>


2、你会发现jigsaw.init(element[, success][, fail]),会接受三个参数,一个是你的验证码显示区的div的元素,剩下两个是验证成功和失败后触发的事件,这里是可以自定义的,比如我让他成功后触发delay()方法,就会在页面显示验证成功


3、就是css美化,可以根据自己需求,修改jigsaw.css里的代码


4、就是完全适配了移动端,通过修改jigsaw.js里的部分代码实现的,主要思路就是判断设备,然后选用不同的代码


心得:

1、

touchstart 对应 mousedown 
touchmove 对应 mousemove 
mouseup 对应 touchend 

2、

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

3、

touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX


网站滑动验证插件及使用方法就说完了,有不懂得欢迎评论。


43人已赞


本文由Fun言网 – Java爱好者创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论5