JavaScript实现登录滑块验证

本文实例为大家分享了JavaScript实现登录滑块验证的具体代码，供大家参考，具体内容如下

html代码

<div class=\"login-select\"><div v-show=\"errselectFlag\" id=\"err-select\"></div><p id=\"title-p\">按住滑块，拖拽验证</p><div id=\"left-select\"></div><div id=\"right-select\"><i id=\"icon-dui\" class=\"iconfont icon-right\"></i></div></div>

javascript代码

//   滑块验证var oRight = document.getElementById(\"right-select\");var bg = document.getElementById(\"left-select\");var title = document.getElementById(\"title-p\");var i = document.getElementById(\"icon-dui\");oRight.onmousedown = function (e) {var downX = e.clientX; //按下按钮后与窗口的x轴间距// 鼠标移动事件oRight.onmousemove = function (e) {if (e.clientX != 240) {oRight.style.left = 0 + \"px\";bg.style.left = 0 + \"px\";}var moveX = e.clientX - downX; //滑动的时候距离窗口的x轴的间距//只有在大于0的时候才拖动,否则会出现反向拖动if (moveX > 0) {oRight.style.left = moveX + \"px\"; //滑块与左边的距离bg.style.width = moveX + \"px\"; //背景的宽度就是滑块距离左边的位置if (moveX >= 280 - oRight.offsetWidth) {i.className = \"iconfont icon-xingzhuang\";i.style.color = \"rgb(86, 192, 15)\";title.innerText = \"验证通过\";title.style.color = \"#fff\";oRight.onmousemove = null;oRight.onmousedown = null;}}};};

style代码

注：样式为sass文件

*{margin: 0;padding: 0;box-sizing: border-box;}.login-select {width: 280px;height: 40px;margin: auto;margin-top: 20px;margin-left: 15px;margin-right: 15px;text-align: center;line-height: 40px;background: rgba(134, 134, 131, 0.6);display: flex;position: relative;#err-select {width: 138px;height: 38px;position: absolute;right: -152px;top: 0;color: #fff;font-size: 12px;border-radius: 5px;line-height: 38px;text-align: center;background: rgb(177, 71, 71);}#title-p {text-align: center;line-height: 40px;width: 100%;height: 100%;font-size: 14px;position: absolute;}#left-select {width: 0;height: 100%;transform: translate(0.3s);background: rgb(86, 192, 15);}#right-select {width: 40px;height: 40px;background: #fff;color: #aaaa;text-align: center;line-height: 40px;border: 1px solid #ccc;position: absolute;cursor: move;}}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: