表单滑动验证 痛定思痛。 2022-10-07 13:47 156阅读 0赞 ## 滑动验证 ## 效果—↓↓↓ 滑动前 ![开始][20210618114704350.png] 滑动中 ![滑动][20210618114727374.png] 滑动完成 ![结束][20210618114746105.png] 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>滑动验证</title> <link rel="stylesheet" type="text/css" href="./css/public.css" /> <style type="text/css"> .content { width: 100%; } .box { margin: 50px auto 0 auto; width: 220px; } .range { width: 222px; height: 32px; border: 1px solid #e4e7ed; overflow: hidden; } .dom { width: 220px; height: 30px; display: flex; align-items: center; margin-left: 0; transform: translateX(-180px); } .progress-bar { background: linear-gradient(45deg, #f43f3b, #ec008c); width: 180px; height: 30px; } .button { line-height: 30px; width: 40px; height: 30px; text-align: center; background: linear-gradient(45deg, #39b54a, #8dc63f); color: #ffffff; cursor: pointer; /* 禁止文本被选中 */ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body> <div class="content"> <div class="box"> <div class="range"> <div class="dom" id="domId"> <div class="progress-bar" id="progress-bar"></div> <div class="button" id="buttonId">-></div> </div> </div> </div> </div> </body> <script type="text/javascript"> let button = document.getElementById('buttonId') let dom = document.getElementById('domId') let progressBar = document.getElementById('progress-bar') let clientX = 0, startX = 0, endX = 0; let width = progressBar.offsetWidth window.onload = function(){ button.onmousedown =function(ev){ //鼠标按下 startX = ev.clientX document.onmousemove = function(ev){ //为了防止鼠标移动太快而离开了DIV产生了bug,所以要给整个页面加onmousemove事件 endX = ev.clientX - startX if (endX < 0) { endX = 0 } else if(endX > width) { endX = width } clientX = endX dom.style.marginLeft = clientX + 'px' }; document.onmouseup = function(){ //鼠标松开时 document.onmousemove = null;//把鼠标移动清除 document.onmouseup = null;//把鼠标松开清除 if (clientX < width) { dom.style.marginLeft = 0 } else if (clientX == width) { alert('验证成功!') button.onmousedown = null } }; return false; }; } </script> </html> [20210618114704350.png]: /images/20221005/56d6a61715d7443c9ed6a367ded11b85.png [20210618114727374.png]: /images/20221005/03a83ce01cba4f6d9ecea554c736a7bc.png [20210618114746105.png]: /images/20221005/bad93216284e49ffa268e500e7817ca2.png
相关 Vue中如何进行表单验证码与滑动验证? Vue中如何进行表单验证码与滑动验证? 在Web应用程序中,表单验证码和滑动验证是常见的安全机制,用于防止恶意攻击和机器人攻击。在Vue中,我们可以使用许多不同的库来实现 忘是亡心i/ 2024年03月16日 19:02/ 0 赞/ 66 阅读
相关 表单滑动验证 滑动验证 效果—↓↓↓ 滑动前 ![开始][20210618114704350.png] 滑动中 ![滑动][20210618114727374.png] 痛定思痛。/ 2022年10月07日 13:47/ 0 赞/ 157 阅读
相关 表单验证 应用 一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu 朱雀/ 2022年07月24日 06:28/ 0 赞/ 455 阅读
相关 表单验证 java script验证表单时常用: "^-\[0-9\]\\[1-9\]\[0-9\]\$" //负整数 "^-?//d+$" //整 ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 294 阅读
相关 表单验证 @Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 / ╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 283 阅读
相关 表单验证 angularjs 表单验证,包含必填、手机、邮箱、ip、网址等 基于angularjs自己封装的验证插件,之前的插件在angularjs上就不能使用了,然后将之前的封 淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 284 阅读
相关 表单验证 表单验证为了减轻服务器的压力,请求次数减少,保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码 梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 295 阅读
相关 Laravel 表单验证 检查应用程序的基底控制器 (App\\Http\\Controllers\\Controller) 类你会看到这个类使用了 ValidatesRequests trait。这个 曾经终败给现在/ 2022年03月22日 10:37/ 0 赞/ 398 阅读
相关 表单验证 java script验证表单时常用: "^-\[0-9\]\\[1-9\]\[0-9\]\$" //负整数 "^-?//d+$" //整 小灰灰/ 2022年01月07日 14:35/ 0 赞/ 430 阅读
还没有评论,来说两句吧...