2. 程式人生 > 程式設計 >JS實現滑動拼圖驗證功能完整示例

JS實現滑動拼圖驗證功能完整示例

阿新 • • 發佈：2020-04-02

本文例項講述了JS實現滑動拼圖驗證功能。分享給大家供大家參考，具體如下：

先看一下效果圖：

JS實現滑動拼圖驗證功能完整示例

JS實現滑動拼圖驗證功能完整示例

JS實現滑動拼圖驗證功能完整示例

設定畫布滑塊屬性

const l = 42,// 滑塊邊長
 r = 10,// 滑塊半徑
 w = 310,// canvas寬度
 h = 155,// canvas高度
 PI = Math.PI
const L = l + r * 2 // 滑塊實際邊長

設定背景圖片：

圖片連結地址可以自行更換

function getRandomImg() {
 return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0,100)
}

CSS部分程式碼：

.container {
 width: 310px;
 margin: 100px auto;
}
#msg {
 width: 100%;
 line-height: 40px;
 font-size: 14px;
 text-align: center;
}
a:link,a:visited,a:hover,a:active {
 margin-left: 100px;
 color: #0366D6;
}
.block {
 position: absolute;
 left: 0;
 top: 0;
}
.sliderContainer {
 position: relative;
 text-align: center;
 width: 310px;
 height: 40px;
 line-height: 40px;
 margin-top: 15px;
 background: #f7f9fa;
 color: #45494c;
 border: 1px solid #e4e7eb;
}
.sliderContainer_active .slider {
 height: 38px;
 top: -1px;
 border: 1px solid #1991FA;
}
.sliderContainer_active .sliderMask {
 height: 38px;
 border-width: 1px;
}
.sliderContainer_success .slider {
 height: 38px;
 top: -1px;
 border: 1px solid #52CCBA;
 background-color: #52CCBA !important;
}
.sliderContainer_success .sliderMask {
 height: 38px;
 border: 1px solid #52CCBA;
 background-color: #D2F4EF;
}
.sliderContainer_success .sliderIcon {
 background-position: 0 0 !important;
}
.sliderContainer_fail .slider {
 height: 38px;
 top: -1px;
 border: 1px solid #f57a7a;
 background-color: #f57a7a !important;
}
.sliderContainer_fail .sliderMask {
 height: 38px;
 border: 1px solid #f57a7a;
 background-color: #fce1e1;
}
.sliderContainer_fail .sliderIcon {
 background-position: 0 -83px !important;
}
.sliderContainer_active .sliderText,.sliderContainer_success .sliderText,.sliderContainer_fail .sliderText {
 display: none;
}
.sliderMask {
 position: absolute;
 left: 0;
 top: 0;
 height: 40px;
 border: 0 solid #1991FA;
 background: #D1E9FE;
}
.slider {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 background: #fff;
 box-shadow: 0 0 3px rgba(0,0.3);
 cursor: pointer;
 transition: background .2s linear;
}
.slider:hover {
 background: #1991FA;
}
.slider:hover .sliderIcon {
 background-position: 0 -13px;
}
.sliderIcon {
 position: absolute;
 top: 15px;
 left: 13px;
 width: 14px;
 height: 10px;
 background: url(img/tb.png) 0 -26px;
 background-size: 34px 471px;
}
.refreshIcon {
 position: absolute;
 right: 0;
 top: 0;
 width: 34px;
 height: 34px;
 cursor: pointer;
 background: url(img/tb.png) 0 -437px;
 background-size: 34px 471px;
}

頁面，頁面只用放一個div就可以了

<div class="container">
 <div id="captcha" style="position: relative"></div>
</div>

js部分程式碼，包括驗證是否正確

<script type="text/javascript">
 (function(window) {
 const l = 42,// 滑塊邊長
  r = 10,// 滑塊半徑
  w = 310,// canvas寬度
  h = 155,// canvas高度
  PI = Math.PI
 const L = l + r * 2 // 滑塊實際邊長
 function getRandomNumberByRange(start,end) {
  return Math.round(Math.random() * (end - start) + start)
 }
 function createCanvas(width,height) {
  const canvas = createElement('canvas')
  canvas.width = width
  canvas.height = height
  return canvas
 }
 function createImg(onload) {
  const img = createElement('img')
  img.crossOrigin = "Anonymous"
  img.onload = onload
  img.onerror = () => {
  img.src = getRandomImg()
  }
  img.src = getRandomImg()
  return img
 }
 function createElement(tagName) {
  return document.createElement(tagName)
 }
 function addClass(tag,className) {
  tag.classList.add(className)
 }
 function removeClass(tag,className) {
  tag.classList.remove(className)
 }
 function getRandomImg() {
  return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0,100)
 }
 function draw(ctx,operation,x,y) {
  ctx.beginPath()
  ctx.moveTo(x,y)
  ctx.lineTo(x + l / 2,y)
  ctx.arc(x + l / 2,y - r + 2,r,2 * PI)
  ctx.lineTo(x + l / 2,y)
  ctx.lineTo(x + l,y + l / 2)
  ctx.arc(x + l + r - 2,y + l / 2,2 * PI)
  ctx.lineTo(x + l,y + l / 2)
  ctx.lineTo(x + l,y + l)
  ctx.lineTo(x,y)
  ctx.fillStyle = '#fff'
  ctx[operation]()
  ctx.beginPath()
  ctx.arc(x,1.5 * PI,0.5 * PI)
  ctx.globalCompositeOperation = "xor"
  ctx.fill()
 }
 function sum(x,y) {
  return x + y
 }
 function square(x) {
  return x * x
 }
 class jigsaw {
  constructor(el,success,fail) {
  this.el = el
  this.success = success
  this.fail = fail
  }
  init() {
  this.initDOM()
  this.initImg()
  this.draw()
  this.bindEvents()
  }
  initDOM() {
  const canvas = createCanvas(w,h) // 畫布
  const block = canvas.cloneNode(true) // 滑塊
  const sliderContainer = createElement('div')
  const refreshIcon = createElement('div')
  const sliderMask = createElement('div')
  const slider = createElement('div')
  const sliderIcon = createElement('span')
  const text = createElement('span')
  block.className = 'block'
  sliderContainer.className = 'sliderContainer'
  refreshIcon.className = 'refreshIcon'
  sliderMask.className = 'sliderMask'
  slider.className = 'slider'
  sliderIcon.className = 'sliderIcon'
  text.innerHTML = '向右滑動滑塊填充拼圖'
  text.className = 'sliderText'
  const el = this.el
  el.appendChild(canvas)
  el.appendChild(refreshIcon)
  el.appendChild(block)
  slider.appendChild(sliderIcon)
  sliderMask.appendChild(slider)
  sliderContainer.appendChild(sliderMask)
  sliderContainer.appendChild(text)
  el.appendChild(sliderContainer)
  Object.assign(this,{
   canvas,block,sliderContainer,refreshIcon,slider,sliderMask,sliderIcon,text,canvasCtx: canvas.getContext('2d'),blockCtx: block.getContext('2d')
  })
  }
  initImg() {
  const img = createImg(() => {
   this.canvasCtx.drawImage(img,w,h)
   this.blockCtx.drawImage(img,h)
   const y = this.y - r * 2 + 2
   const ImageData = this.blockCtx.getImageData(this.x,y,L,L)
   this.block.width = L
   this.blockCtx.putImageData(ImageData,y)
  })
  this.img = img
  }
  draw() {
  // 隨機建立滑塊的位置
  this.x = getRandomNumberByRange(L + 10,w - (L + 10))
  this.y = getRandomNumberByRange(10 + r * 2,h - (L + 10))
  draw(this.canvasCtx,'fill',this.x,this.y)
  draw(this.blockCtx,'clip',this.y)
  }
  clean() {
  this.canvasCtx.clearRect(0,h)
  this.blockCtx.clearRect(0,h)
  this.block.width = w
  }
  bindEvents() {
  this.el.onselectstart = () => false
  this.refreshIcon.onclick = () => {
   this.reset()
  }
  let originX,originY,trail = [],isMouseDown = false
  this.slider.addEventListener('mousedown',function(e) {
   originX = e.x,originY = e.y
   isMouseDown = true
  })
  document.addEventListener('mousemove',(e) => {
   if(!isMouseDown) return false
   const moveX = e.x - originX
   const moveY = e.y - originY
   if(moveX < 0 || moveX + 38 >= w) return false
   this.slider.style.left = moveX + 'px'
   var blockLeft = (w - 40 - 20) / (w - 40) * moveX
   this.block.style.left = blockLeft + 'px'
   addClass(this.sliderContainer,'sliderContainer_active')
   this.sliderMask.style.width = moveX + 'px'
   trail.push(moveY)
  })
  document.addEventListener('mouseup',(e) => {
   if(!isMouseDown) return false
   isMouseDown = false
   if(e.x == originX) return false
   removeClass(this.sliderContainer,'sliderContainer_active')
   this.trail = trail
   const {
   spliced,TuringTest
   } = this.verify()
   if(spliced) {
   if(TuringTest) {
    addClass(this.sliderContainer,'sliderContainer_success')
    this.success && this.success()
   } else {
    addClass(this.sliderContainer,'sliderContainer_fail')
    this.text.innerHTML = '再試一次'
    this.reset()
   }
   } else {
   alert("驗證失敗");
   addClass(this.sliderContainer,'sliderContainer_fail')
   this.fail && this.fail();
                        //驗證失敗後，1秒後重新載入圖片
   setTimeout(() => {
    this.reset()
   },1000)
   }
  })
  }
  verify() {
  const arr = this.trail // 拖動時y軸的移動距離
  const average = arr.reduce(sum) / arr.length // 平均值
  const deviations = arr.map(x => x - average) // 偏差陣列
  const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length) // 標準差
  const left = parseInt(this.block.style.left)
  return {
   spliced: Math.abs(left - this.x) < 10,TuringTest: average !== stddev,// 只是簡單的驗證拖動軌跡，相等時一般為0，表示可能非人為操作
  }
  }
  reset() {
  this.sliderContainer.className = 'sliderContainer'
  this.slider.style.left = 0
  this.block.style.left = 0
  this.sliderMask.style.width = 0
  this.clean()
  this.img.src = getRandomImg()
  this.draw()
  }
 }
 window.jigsaw = {
  init: function(element,fail) {
  new jigsaw(element,fail).init()
  }
 }
 }(window))
 jigsaw.init(document.getElementById('captcha'),function() {
 alert("驗證成功");
 })
</script>

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧彙總》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。

相關推薦

JS實現滑動拼圖驗證功能完整示例

本文例項講述了JS實現滑動拼圖驗證功能。分享給大家供大家參考，具體如下：

JS簡單表單驗證功能完整示例

本文例項講述了JS簡單表單驗證功能。分享給大家供大家參考，具體如下： 簡單js表單驗證demo

原生js實現密碼強度驗證功能

我們在填寫表單的時候，特別是輸入密碼的時候，經常看到實時顯示密碼強度的效果，那麼這種效果如何通過我們的原生js實現呢？

原生js 實現表單驗證功能

表單驗證是web前端最常見的功能之一，也屬於前端開發的基本功。自己完成一個表單驗證的開發，也有助於加深對字串處理和正則表示式的理解。

Bootstrap實現前端登入頁面帶驗證碼功能完整示例

本文例項講述了Bootstrap實現前端登入頁面帶驗證碼功能。分享給大家供大家參考，具體如下：

Vue.js實現的計算器功能完整示例

這篇文章主要介紹了Vue.js實現的計算器功能,結合完整例項形式分析了vue.js響應滑鼠事件實現基本的數值運算相關操作技巧,可實現四則運算及乘方、開方等功能,需要的朋友可以參考下，本文例項講述了Vue.js實現的計算器功

C++ opencv實現的把藍底照片轉化為白底照片功能完整示例

本文例項講述了C++ opencv實現的把藍底照片轉化為白底照片功能。分享給大家供大家參考，具體如下：

Python使用gluon/mxnet模組實現的mnist手寫數字識別功能完整示例

本文例項講述了Python使用gluon/mxnet模組實現的mnist手寫數字識別功能。分享給大家供大家參考，具體如下：

Pytorch實現的手寫數字mnist識別功能完整示例

本文例項講述了Pytorch實現的手寫數字mnist識別功能。分享給大家供大家參考，具體如下：

JS校驗與最終登陸介面功能完整示例

本文例項講述了JS校驗與最終登陸介面功能。分享給大家供大家參考，具體如下：

jQuery實現倒計時功能完整示例

本文例項講述了jQuery實現倒計時功能。分享給大家供大家參考，具體如下： demo程式碼：

js實現滑動滑塊驗證登入

本文例項為大家分享了js實現滑動滑塊驗證登入的具體程式碼，供大家參考，具體內容如下

JavaScript實現拖動滑塊拼圖驗證功能（html5、canvas）

引言： 滑塊拖動驗證現在很多地方都用到，週末就琢磨著寫了一個，放上來，看看有沒有人用得上！ 效果：

C# Winfrom實現Skyline畫直線功能的示例程式碼

前言： 這裡記錄了我在學習Skyline二次開發中所遇到的問題，適合剛接觸Skyline二次開發的同學檢視使用，從邏輯到程式碼逐一詳解，但是還是重在理解，希望對你有所幫助。

Java web實現動態圖片驗證碼的示例程式碼

驗證碼 防止惡意表單註冊 生成驗證碼圖片 定義寬高 int width = 100; int height = 50; 使用BufferedImage再記憶體中生成圖片

JS document內容及樣式操作完整示例

本文例項講述了JS document內容及樣式操作。分享給大家供大家參考，具體如下：

JS實現滑動導航效果

本文例項為大家分享了JS實現滑動導航效果的具體程式碼，供大家參考，具體內容如下

JS實現滑動外掛

本文例項為大家分享了JS實現滑動外掛的具體程式碼，供大家參考，具體內容如下

Node.js實現批量下載圖片簡單操作示例

本文例項講述了Node.js實現批量下載圖片簡單操作。分享給大家供大家參考，具體如下：

vue.js實現簡單的計算器功能

使用vue.js來編寫一個簡單的計算器，供大家參考，具體內容如下 效果如圖所示：是一個十分簡單的計算器，包含了加減乘除，不是用原生js寫的，而是用vue.js寫的