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

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 // 引入矢量图标库
 <link rel="stylesheet" href="https://at.alicdn.com/t/font_2248239_eso2z5bskxk.css">
 <title>Document</title>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 
 .box {
  width: 300px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #e8e8e8;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  margin-top: 100px;
  margin-left: 200px;
 }
 
 .box .bgColor {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
 }
 
 .box .tips {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #000;
  text-align: center;
  user-select: none;
 }
 
 .ball {
  width: 50px;
  height: 38px;
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  cursor: move;
  position: absolute;
  top: 0;
  left: 0;
 }
 </style>
</head>
 
<body>
 <div class="box">
 <div class="bgColor"></div>
 <div class="tips">滑动验证</div>
 <div class="ball"><i class="iconfont icon-double-arro-right"></i></div>
 </div>
</body>
<script>
 var box = document.getElementsByClassName("box")[0];
 var ball = document.getElementsByClassName("ball")[0];
 var bgColor = document.getElementsByClassName("bgColor")[0];
 var tips = document.getElementsByClassName("tips")[0];
 // 设置成功状态
 var isSuccess = false; //默认为false 不成功
 ball.onmousedown = function(e) {
 var e = e || window.event;
 
 // 获取鼠标相对于事件源左上角的位置
 var posx = e.offsetX;
 
 // 每次鼠标按下时 清除动画样式
 ball.style.transition = "";
 bgColor.style.transition = "";
 document.onmousemove = function(e) {
  var e = e || window.event;
  var x = e.pageX - box.offsetLeft - posx;
  var max = box.clientWidth - ball.clientWidth;
  if (x <= 0) {
  x = 0;
  }
  if (x >= max) {
  x = max;
  }
  bgColor.style.width = x + "px";
  ball.style.left = x + "px";
  bgColor.style.backgroundColor = "#6ff";
  if (x == max) {
  success();
  }
 }
 document.onmouseup = function() {
  // 如果没有解锁成功则返回原点
  if (!isSuccess) {
  bgColor.style.width = 0 + "px";
  ball.style.left = 0 + "px";
  ball.style.transition = "left 0.6s linear";
  bgColor.style.transition = "width 0.6s linear";
  }
  // 鼠标抬起时,移除鼠标移动事件和鼠标抬起事件
  document.onmouseup = null;
  document.onmousemove = null;
 }
 }
 // 定义一个滑块解锁成功的方法
 function success() {
 isSuccess = true;
 // 获取图标
 var icon = ball.firstElementChild;
 tips.textContent = "解锁成功";
 bgColor.style.backgroundColor = "lightgreen";
 icon.className = "iconfont icon-gou";
 icon.style.color = "lightgreen";
 //滑动成功时，移除鼠标按下事件
 ball.onmousedown = null;
 }
</script>
 
</html>

 效果图如下:

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Node.js怎样结合mysql连接池使用

  /**连接池连接和缓存的技术**/varmysql=require('mysql');varpool=mysql.createPool({connectionLimit:2,//连接池最多可以创建连接数host:'',user:'root',database:'yudi',password:'',queueL

• 如何利用jQuery制作手风琴展开效果，方法及代码是什么

  这篇文章主要为大家详细介绍了jquery实现手风琴展开效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue项目中怎样实现动态加载和刷新，哪些事项要注意

  这篇文章主要给大家介绍了关于vue动态菜单、动态路由加载以及刷新踩坑的相关资料,踩的这些坑其实是挺常见的,大家可以看看,避免遇到的时候再踩到同样的坑,需要的朋友可以参考下

• jQuery中怎么样删除元素内容，方法是什么？

  这篇文章给大家分享的是jQuery中怎么样删除元素内容的方法，文中给大家分享了两个方法，分别是利用children()和remove()方法、empty()方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 跨域解决的常用方法有什么，具体操作是什么

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下