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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
javascript 实现map集合
Apr 03 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
微信小程序的引导页实现代码
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
微信支付开发告警通知实例
2016/07/12 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
动态添加js事件实现代码
2009/03/12 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue-cli中的webpack配置详解
2017/09/25 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
JS+CSS实现过渡特效
2021/01/02 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
放假通知范文
2015/04/14 职场文书
律师函格式范本
2015/05/27 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
apache ftpserver搭建ftp服务器
2022/05/20 Servers
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python