js实现html滑动图片拼图验证


Posted in Javascript onJune 24, 2020

本文实例为大家分享了js实现html滑动图片拼图验证的具体代码,供大家参考,具体内容如下

html:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./index.css" >
 <title>Document</title>
</head>

<body>
 <div class="container">
 <canvas width="310" height="155" id="canvas"></canvas>
  <canvas width="310" height="155" id="block"></canvas>
 <div class="refreshIcon"></div>
 <div class="bar">
  <div id="bar-mask">
  <div class="verSliderBlock"></div>
  </div>
  <span id="slide">向右滑动验证</span>
 </div>
 </div>
 <script src="./index.js"></script>

</body>

css:

*{
 margin: 0;
 padding: 0;
}
body {
 background-color: #E8E8E8;
}
.container{
 position: relative;
}
#canva{
 background: indianred;
}
 
#block{
 position: absolute;
 left: 0px;
}
.refreshIcon{
 position: absolute;
 left: 280px;
 top: 5px;
 width: 21px;
 height: 20px;
 cursor: pointer;
 background: url(./refresh.png);
 display: block;
}
.verSliderBlock{
 height: 40px;
 width: 40px;
 background-color: #fff;
 background:url('./right_arrow.png');
 background-size:100%;
 box-shadow: 0 0 3px rgba(0, 0, 0, .3);
 cursor: pointer;
 position: absolute;
 text-align: center;
 line-height: 40px;
 color: #45494c;
 font-size: 25px;
 font-weight: 400;

}
.bar{
 position: relative;
 text-align: center;
 width: 310px;
 height: 40px;
 line-height: 40px;
 margin-top: 15px;
 background: #f7f9fa;
 color: #45494c;
 border: 1px solid #e4e7eb;
 display: block;
}
#bar-mask{
 position: absolute;
 left: 0;
 top: 0;
 height: 40px;
 border: 0 solid #1991fa;
 background: #d1e9fe;
}

js:

(function(window){
 var canvas = document.getElementById('canvas');
var block = document.getElementById('block');
var canvas_ctx = canvas.getContext('2d')
var block_ctx = block.getContext('2d')
var img = document.createElement('img')
var refresh = document.querySelector('.refreshIcon')
var x = Math.round(Math.random() * 200) + 10,
 y = Math.round(Math.random() * 100) + 10,
 
 w = 42,
 l = 42,
 r = 10,
 PI = Math.PI
console.log(x,y)
//获取图片后面的随机号码
function getRandomNumberByRange(start, end) {
 return Math.round(Math.random() * (end - start) + start)
}
//初始化图片
function initImg(){
 img.onload = function () {
 canvas_ctx.drawImage(img, 0, 0, 310, 155)
 block_ctx.drawImage(img, 0, 0, 310, 155)
 var blockWidth = w + r * 2
 var _y = y - r * 2 + 2 // 滑块实际的y坐标
 var ImageData = block_ctx.getImageData(x, _y, blockWidth, blockWidth)
 block.width = blockWidth
 block_ctx.putImageData(ImageData, 0, _y)
 };
 img.crossOrigin = "Anonymous"
 img.src = 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
}
//清除tupian
function clean(){
 x = Math.round(Math.random() * 200) + 10,
 y = Math.round(Math.random() * 100) + 10,
 console.log(x,y)
 canvas_ctx.clearRect(0, 0, 310, 155);
 block_ctx.clearRect(0, 0, 310, 155)
 block.width = 310
 draw(canvas_ctx, 'fill')
 draw(block_ctx, 'clip')
}
//绘制方块
function draw(ctx, operation) {
 ctx.beginPath()
 ctx.moveTo(x, y)
 ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
 ctx.lineTo(x + l, y)
 ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
 ctx.lineTo(x + l, y + l)
 ctx.lineTo(x, y + l)
 ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
 ctx.lineTo(x, y)
 ctx.lineWidth = 2
 ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
 ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
 ctx.stroke()
 ctx[operation]()
 ctx.globalCompositeOperation = 'overlay'
}
initImg()
draw(canvas_ctx, 'fill')
draw(block_ctx, 'clip')
//添加移动事件
var block_slider = document.querySelector("#block");
var slider = document.querySelector(".verSliderBlock");
var slider_mark = document.querySelector("#bar-mask");
//用于判断当前是否是在按住滑块的情况下
var yd = false
var moveX = 0
var downX = 0

//鼠标按下
slider.onmousedown = function (e) {
 downX = e.clientX;
 yd = true

}

//鼠标移动事件
function hadleMousemove(e) {
 if (yd) {
 moveX = e.clientX - downX;
 document.querySelector('#slide').innerHTML = ''

 if (moveX >= 310) {
  moveX = 310 - 40
 }

 if (moveX > -2) {
  slider.style.backgroundColor = "#1991FA";
  slider_mark.style.borderWidth = "1px"
  slider_mark.style.borderColor = "#1991fa"
  slider_mark.style.width = moveX + 40 + "px";

  block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
  slider.style.left = moveX + "px";

 }
 }

}

//鼠标抬起事件
function hadleMouseup(e) {
 if (yd) {
 slider.onmousemove = null;
 console.log(moveX)
 block_slider.style.left = (310 - 40 - 20) / (310 - 40) * moveX + "px";
 if (Math.abs((310 - 40 - 20) / (310 - 40) * moveX - x) < 10) {
  slider.style.background = "url('./success.png')";
  slider.style.backgroundSize = '100%'
  // alert('验证成功')
  setTimeout(() => {
  rest();

  }, 1000)
 } else {
  slider_mark.style.backgroundColor = "#fce1e1"
  slider_mark.style.borderWidth = "1px"
  slider_mark.style.borderColor = "#f57a7a"

  slider.style.backgroundColor = "#f57a7a";
  slider.style.background = "url('./fail.png')";
  slider.style.backgroundSize = '100%'
  setTimeout(() => {
  rest();

  }, 1000)
 }

 yd = false
 }
}

//鼠标在按住滑块下移动
slider.onmousemove = function (e) {
 hadleMousemove(e)
}
//鼠标在滑块下抬起
slider.onmouseup = function (e) {
 hadleMouseup(e)
}

//设置全局的移动事件,当鼠标按下滑块后,移动过程中鼠标可能会移出滑块,这是滑块也会监听鼠标的移动进行相应的移动
document.addEventListener('mousemove', function (e) {
 hadleMousemove(e)
})
document.addEventListener('mouseup', function (e) {
 hadleMouseup(e)
})


function rest() {
 clean()
 document.querySelector('#slide').innerHTML = '向右滑动验证'
 slider.style.backgroundColor = "#fff";
 slider.style.left = "0px"
 slider.style.background = "url('./right_arrow.png')";
 slider.style.backgroundSize = '100%'
 block_slider.style.left = "0px"

 slider_mark.style.width = "0px"
 slider_mark.style.backgroundColor = "#d1e9fe"
 slider_mark.style.borderWidth = "0px"
 slider_mark.style.borderColor = "#d1e9fe"
 initImg()
}
//刷新
refresh.onclick = function(){
 rest()
}
}(window))

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

Javascript 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
理解JavaScript原型链
Oct 25 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
微信小程序的引导页实现代码
Jun 24 #Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 #Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 #Javascript
javascript实现前端成语点击验证优化
Jun 24 #Javascript
vue各种事件监听实例(小结)
Jun 24 #Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 #Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
You might like
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
用Python写冒泡排序代码
2016/04/12 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
前台文员岗位职责及工作流程
2013/11/19 职场文书
汇源肾宝广告词
2014/03/20 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
技术员岗位职责
2015/02/04 职场文书
出国留学英文自荐信
2015/03/25 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
创业计划书详解
2019/07/19 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python