井井客

搜索

原生JS实现拖动拼图验证

最新翻出来的一个以前特别想写的demo(以前看到群里小伙伴写过我把链接保存到文档中这次翻文档翻出来),然后花了两个半天完成的。半天画canvas半天写Js逻辑,然后发现真的没有一开始想像

原生JS实现拖动拼图验证

实现的效果图就是上面这样的。通过验证时,会刷新整个canvas,重新获取一张随机的背景再随机位置拼图;而验证失败的话则会返回到拖动的原点,不进行其它操作。

我的效果链接:点击这里查看我的demo

然后放下小伙伴的效果链接:http://xyxiao.cn/vue-blog/#/video

我们两个链接其实都是参照极验的UI,区别是我使用canvas绘画(为了画出来那个拼图的形状),然后我其它的样式效果就比较糙了。。。

虽然极验被口水太多,这种验证方式也被批安全性了。但是还是心痒痒的想自己来实现一次,实话是Js写的检验码安全性的确较低~

代码中有相应的注释,很好理解。如果觉得代码有不合理的地方也是欢迎拍砖的~

文章TAG:JS

作者:井井客原创来源:原创
本文标题:原生JS实现拖动拼图验证
本文链接:http://www.jingjingke.com/c/17285.html

上一篇:svg练习画了一个熊猫
下一篇:canvas完成贪吃蛇小游戏

文章分类

相关阅读

随便看看