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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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正则
2006/07/07 PHP
php split汉字
2009/06/05 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
prototype class详解
2006/09/07 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
Javascript Math对象
2009/08/13 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
jquery选择器使用详解
2014/04/08 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python判断设备是否联网的方法
2018/06/29 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
公司领导推荐信
2013/11/12 职场文书
土木工程师岗位职责
2013/11/24 职场文书
酒店副总岗位职责
2013/12/24 职场文书
高效课堂标语
2014/06/26 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang