JavaScript实现滑块验证解锁


Posted in Javascript onJanuary 07, 2021

本文实例为大家分享了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>

 效果图如下:

JavaScript实现滑块验证解锁

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
javascript里使用php代码实例
Dec 13 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 #Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 #Javascript
JS中多层次排序算法的实现代码
Jan 06 #Javascript
如何使用原生Js实现随机点名详解
Jan 06 #Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 #Javascript
JavaScript 中的六种循环方法
Jan 06 #Javascript
JavaScript的一些小技巧分享
Jan 06 #Javascript
You might like
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python查询IP地址归属完整代码
2017/06/21 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
python3.5的包存放的具体路径
2020/08/16 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
C#笔试题
2015/07/14 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
经理秘书求职自荐信范文
2014/03/23 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
代理人委托书
2014/09/16 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
安全保证书格式
2015/02/28 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
同学会演讲稿
2019/04/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
教你用python控制安卓手机
2021/05/13 Python
Python中的datetime包与time包包和模块详情
2022/02/28 Python