滑块验证成功后，对勾对号显示为根号

最近学习了一个滑块拖动验证解锁解锁的例子，代码比较好懂，只是遇到了一个问题，验证通过以后，✅在网页中预览的时候，显示成根号的样子。可同样的代码，在我的电脑上显示为根号，在别人的电脑上显示的是对勾，没有任何问题，虽然电脑不同，用的也都是谷歌浏览器。具体什么原因造成的，我还不太确定。后来，这个问题倒是解决了，那就是给滑块的innerHTML赋值的时候，不直接敲成对勾，而是采用特殊字符编码，我从下面这篇文章里
HTML特殊字符编码对照表查到了对勾对应的编码是"&check ;"，这样就可以准确的显示成✅了。

源代码使用sliding.οnmοusedοwn=function(){}写的，我改成用sliding.addEventListener()方式，写的过程中出了错，最后滑块不动，然后程序还不报错，后来经过排查，原来是在回调函数中slide()中，漏传了参数e。
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>滑块验证解锁</title><style>.drag {position: relative;                /*父元素相对定位*/width: 300px;height: 40px;line-height: 40px;background-color: #e3e3e3;margin: 10px auto;}.bg {position: absolute;width: 0px;height: 100%;background-color: #23C6D9;}.text {position: absolute;width: 100%;height: 100%;text-align: center;user-select: none;                 /*相关按钮及子元素的文本将不可选*/}.sliding {  /*滑块*/position: absolute;width: 40px;height: 38px;border: 1px solid #ccc;cursor: move;text-align: center;background-color: #fff;user-select: none;color: #f00;}</style></head><body><div class="drag"><div class="bg"></div><div class="text">请按住滑块，拖动到最右边</div><div class="sliding">&gt;&gt;</div></div><script>var drag = document.querySelector(".drag");var bg = drag.querySelector(".bg");var text = drag.querySelector(".text");var sliding = drag.querySelector(".sliding");var flag = false;var distance = drag.offsetWidth - sliding.offsetWidth;sliding.addEventListener('mousedown', dragon);function dragon(e) {sliding.style.transition = "";bg.style.transition = "";var downX = e.pageX;document.addEventListener('mousemove', slide);function slide(e) {var offsetX = e.pageX - downX;if (offsetX > distance) {offsetX = distance;} else if (offsetX < 0) {offsetX = 0;}sliding.style.left = offsetX + "px";bg.style.width = offsetX + "px";if (offsetX == distance) {text.innerHTML = "验证通过";text.style.color = "#fff";sliding.innerHTML = "&check;"; /*对勾的编码也可用✓*/sliding.style.color = "green";bg.style.backgroundColor = "#80C63F";flag = true;sliding.removeEventListener('mousedown', dragon);document.removeEventListener('mousemove', slide);}};sliding.addEventListener('mouseup', init); //鼠标松开function init() {if (flag) { //如果鼠标松开时，滑到了终点，则直接返回return;} else {    //反之，则将滑块恢复到初始位置sliding.style.left = 0;bg.style.width = 0;sliding.style.transition = "left 1s ease";  /*过渡效果*/bg.style.transition = "width 1s ease";document.removeEventListener('mousemove', slide);sliding.removeEventListener('mouseup', init);}}};</script></body>
</html>

滑块验证成功后，对勾对号显示为根号相关推荐

cas后端返回html直接跳转,CAS验证成功后不能跳转到登陆成功的主页面解决办法...
CAS验证成功后不能跳转到登陆成功的主页面现在部署了CAS,有一个应用,下载输入应用的URL可以正确跳转到CAS服务的登陆界面,登陆验证通过后页面却跳转到了应用的登陆界面,不能直接进入登陆成功的主页 ...
Spring Security继承AbstractAuthenticationProcessingFilter验证成功后自动跳转地址“/”
Spring Security版本:5.5.1 最近学Spring Security,实现自定义的前后端分离的身份验证,发现通过继承AbstractAuthenticationProcessingFi ...
登陆验证成功后的跳转页面依然保留用户信息
从login.jsp到 dologin.jsp 再到 login_success.jsp,在登陆成功后,两种方法可让 login_success.jsp依然获取表单信息: 1.Session内置对象: ...
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
在vue中,可以用sessionStorage或localStorage来存储token,也可以用vuex来存储(但要考虑页面刷新数据消失问题,可以在vuex用Storage),下面介绍用localS ...
WPF中，Combox的SelectedItem属性绑定成功后，未能默认显示上一次选择的结果。
问题描述: Combox中,设定了绑定对象,但是在第一次进入时却没有显示上次选中的项. 1)查看SelectedItem对应绑定的值,也是有的(启动时,读取上次设置的结果,来初始化界面). ...
凡科网JS逆向后跳出的滑块验证（base64图片解码之后的破解滑块验证）
目录 1.前提和大概思路概述 2. 转换思路selenium和验证滑块图片的获取处理 3.总结 1.前提和大概思路概述只是学习的途中有一些新的发现,分享给大家,希望对你们有帮助. 凡科网的JS逆向的 ...
MVVM架构~knockoutjs系列之验证成功提示显示
对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.isValid ...
SSM框架，ajax实现登陆界面验证和登陆成功后页面跳转问题
账号.密码和验证码都正确后,使用了ajax实现验证,验证结束后不能像正常一样返回一个字符串,用视图解析器来跳转页面  & ...
使用selenium模拟登录解决滑块验证问题
本次主要是使用selenium模拟登录网页端的TX新闻,本来最开始是模拟请求的,但是某一天突然发现,部分账号需要经过滑块验证才能正常登录,如果还是模拟请求,需要的参数太多了,找的心累.不过好在TX的滑 ...

滑块验证成功后，对勾对号显示为根号

滑块验证成功后，对勾对号显示为根号相关推荐

最新文章

热门文章