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 相关文章推荐
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js style动态设置table高度
Oct 21 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
Vue异步组件使用详解
Apr 08 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 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版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
Node.js编码规范
2014/07/14 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
基于python实现把图片转换成素描
2019/11/13 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
运动会广播稿30字
2014/01/21 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
队名及霸气口号大全
2015/12/25 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸