最近学习了一个滑块拖动验证解锁解锁的例子，代码比较好懂，只是遇到了一个问题，验证通过以后，✅在网页中预览的时候，显示成根号的样子。可同样的代码，在我的电脑上显示为根号，在别人的电脑上显示的是对勾，没有任何问题，虽然电脑不同，用的也都是谷歌浏览器。具体什么原因造成的，我还不太确定。后来，这个问题倒是解决了，那就是给滑块的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">>></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 = "✓"; /*对勾的编码也可用✓*/
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>