JavaScript实现滑动条的简单验证

短命女 2022-02-15 08:17 373阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]  
给大家一个下载网址：[http://sc.chinaz.com/jiaoben/160330568920.htm][http_sc.chinaz.com_jiaoben_160330568920.htm]

下载好后解压压缩包：

找到drag.js文件：  
![在这里插入图片描述][20190424101742141.png]  
注意上方的两张效果图，有没有发现拖动前和拖动后的字都不一样，拖动前的字是：拖动滑块验证。拖动后的字是：验证通过。给它设置一个id，名为haha,目的就是来接受在没滑动前的几个字，就是通过字来验证登陆。

好了，有了id后我们自然就能接收这几个字的值了。

回到login.html页面  
写个方法来通过滑动前后的字来判断：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 1]  
在登陆上触发这个方法：  
![在这里插入图片描述][20190424101839621.png]

到此，简单的滑动验证就实现了。

原文：[https://blog.csdn.net/qq\_42249896/article/details/81001877][https_blog.csdn.net_qq_42249896_article_details_81001877]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]: /images/20220215/33229530cee04caa93b2bc871d560e91.png
[http_sc.chinaz.com_jiaoben_160330568920.htm]: http://sc.chinaz.com/jiaoben/160330568920.htm
[20190424101742141.png]: /images/20220215/e3a3273dc75346b98846c7615cfba6b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70 1]: /images/20220215/fc8faf4ac787463fa603a047b765bf9e.png
[20190424101839621.png]: /images/20220215/c0dc3be94e9343ce81dd14254aed4fc1.png
[https_blog.csdn.net_qq_42249896_article_details_81001877]: https://blog.csdn.net/qq_42249896/article/details/81001877