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 相关文章推荐
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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
php实现计数器方法小结
2015/01/05 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
简单的js表单验证函数
2013/10/28 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python删除列表中重复记录的方法
2015/04/28 Python
python3爬取各类天气信息
2018/02/24 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
如何写好建议书
2014/03/13 职场文书
法定代表人免职证明
2015/06/24 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
JavaScript流程控制(分支)
2021/12/06 Javascript