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弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
js 数组 fill() 填充方法
Nov 02 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
多重?l件?合查?(二)
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
python写的一个文本编辑器
2014/01/23 Python
python快速查找算法应用实例
2014/09/26 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
python 字符串格式化的示例
2020/09/21 Python
Django model class Meta原理解析
2020/11/14 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
小学生获奖感言范文
2014/02/02 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python