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 相关文章推荐
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
javascript实现多边形碰撞检测
Oct 24 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
网站当前的在线人数
2006/10/09 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python六大开源框架对比
2015/10/19 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python分布式环境下的限流器的示例
2017/10/26 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
劳动模范事迹材料
2014/01/19 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
班级标语大全
2014/06/21 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL