js手写滑动验证（兼容pc和移动端）
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>title>
<script src="assets/js/vue.min.js">script>
<script src="assets/js/jquery-1.12.4.min.js">script>
<style>
[v-cloak] {
display: none;
}
*::-webkit-input-placeholder {
color: #999;
`ter-spacing: 2px;
}
*:-moz-placeholder {
color: #999;
letter-spacing: 2px;
}
*:-ms-input-placeholder {
color: #999;
letter-spacing: 2px;
}
div, p, ul, li, html, body {
padding: 0;
margin: 0;
}
input {
font-size: 15px;
outline: none;
}
html {
height: 100%;
width: 100%;
}
#app{
height: 100%;
}
.header {
height: 64px;
width: 100%;
line-height: 64px;
text-align: center;
background-color: #1b1920;
position: relative;
}
.header span {
font-size: 17px;
color: rgb(255, 255, 255);
}
.content {
border: 1px solid #000;
}
.content li {
list-style: none;
}
.getmsg {
height: 124px;
width: 100%;
background: url("assets/images/bg1.png");
background-repeat: no-repeat;
background-size: cover;
}
.getmsg {
position: relative;
}
.rex {
position: absolute;
top:25px;
left:4%
}
.rex .rex_icon {
height: 20px;
border-left: 1px solid rgb(7,112,45);
margin:0 10px 0 10px;
display: inline-block;
}
.rex .title{
color:rgb(1,131,56);
font-size: 19px;
font-weight: 500;
letter-spacing: 1px;
position: relative;
bottom:4px;
display: inline-block;
}
.getmsg .logo {
width: 74px;
height: 26px;
}
.getmsg .getmsg_input {
width: 100%;
position: absolute;
bottom: 10px
}
.input {
padding-left: 12%;
margin-left: 4%;
background: rgb(255, 255, 255);
width: 80%;
border-radius: 10px 10px 0 0;
background-image: url("assets/images/input.png");
background-repeat: no-repeat;
background-size: 15px 16px;
background-position-x: 16px;
background-position-y: 16px;
}
.input .enter{
position: absolute;
width: 60px;
height: 28px;
line-height: 28px;
border-radius: 25px;
border: none;
outline: none;
background: #43d280;
color:#fff;
font-size: 14px;
letter-spacing: 1px;
text-indent:1px;
top:18%;
right:7%
}
.getmsg_input input {
height: 47px;
border: none;
width: 50%;
}
.getmsg_input .input span {
color: rgb(51, 51, 51);
margin-right: 25px
}
.msgtips {
border-radius: 10px;
position: relative;
width: 80%;
margin-left: 4%;
background: rgb(255, 255, 255);
padding:6%
}
.msgtips .code{
color:#f95959
}
.msgtips img{
position: absolute;
top:-22px;
width: 12px;
height: 32px;
}
.msgtips .left{
left:4%
}
.msgtips .right{
right: 4%;
}
.msgtips .title{
letter-spacing: 1px;
font-size: 15px;
color:rgb(100,102,100);
font-weight: bold;
}
.msgtips p{
margin-top: 12px;
margin-bottom: 12px;
height: 45px;
line-height: 20px;
font-size: 14px;
color:rgb(123,123,123);
letter-spacing: 1px;
}
.input_image {
display: inline-block;
}
.msgcontent{
background: -webkit-linear-gradient(#cdefda, #4ed487);
background: -o-linear-gradient(#cdefda, #4ed487);
background: -moz-linear-gradient(#cdefda, #4ed487);
background: linear-gradient(#cdefda, #4ed487);
}
.msgform{
width: 80%;
margin-top:12px;
margin-left: 4%;
padding:6%;
height: 360px;
border-radius: 10px;
background: rgb(255, 255, 255);
}
.msgform li{
font-size: 14px;
list-style: none;
}
.msgform li .title{
width: 30%;
color:rgb(123,123,123);
letter-spacing: 1px;
}
.msgform li .formcontent{
display: block;
width: 70%;
text-align: -webkit-right;
color:rgb(93,93,93)
}
.msgcontent li{
height: 45px;
line-height: 45px;
overflow: hidden;
border-bottom:1px solid #f2f2f2;
}
.msgcontent .formcontent{
display: inline-block;
float: right;
}
.specialLH{
line-height: initial;
}
#rex_card{
width: 100%;
height:100%;
position: fixed;
z-index: 9;
background: rgba(0,0,0,0.3);
}
#rex_card .drawimg{
height: 300px;
margin: auto;
padding-top: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
width: 340px;
}
#rex_card .draw_img{
height: 300px;
margin: 10px;
}
#rex_card .draw_img .puzzle p,#rex_card .draw_img .puzzle .puzzle_only{
float: left;
width: 19%;
height:50px;
background-color: #4a9ec3;
text-align: center;
line-height: 50px;
font-weight: bold;
color:#fff;
border: 1px solid #fff;
}
#rex_card .draw_img .puzzle .puzzle_only{
background-color: #4ad184;
float: inherit;
position: absolute;
top:52px;
left:0
}
#rex_card .draw_img .puzzle{
position: relative;
overflow: hidden;
margin-bottom: 20px;
margin-left:4px;
}
#rex_card .puzzle_control{
width:320px;
text-align: center;
position: relative;
height: 40px;
background-color: #dfe1e2;
line-height: 40px;
border:1px solid #e5e7e8;
border-radius: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#rex_card .puzzle_control span{
display: inline-block;
color:#88949d;
}
#rex_card .puzzle_control .puzzle_btn{
width:60px;
height: 60px;
border:1px solid #d7d7d7;
outline: none;
border-radius: 50%;
background-color: #fff;
position: absolute;
text-align: center;
top:-10px;
left: -8px;
}
#rex_card .puzzle_control .puzzle_btn:active{
background-color: #eee;
}
#rex_card .puzzle_control .puzzle_btn span:first-child {
margin-left: 4px;
}
#rex_card .puzzle_control .puzzle_btn span{
margin-top: 18px;
margin-right: 2px;
height: 24px;
display: inline-block;
border-right: 4px solid #60c007;
}
#rex_card .puzzle .tips{
position: absolute;
bottom:-25px;
padding: 2px;
background-color: #de715b;
color:#fff;
width: 304px;
left:1px;
text-align: center;
font-size: 15px;
}
#rex_card .puzzle .tips_right{
position: absolute;
bottom:-25px;
padding: 2px;
background-color: #4ad184;
color:#fff;
width: 304px;
left:1px;
text-align: center;
font-size: 15px;
}
.flowlock{
overflow-y:hidden;
}
.movebox{
animation: move 0.3s;
}
.wrongbox{
animation: wrong 2s;
}
@keyframes wrong {
0% {
bottom: -25px
}
50% {
bottom: 0;
}
100% {
bottom: -25px;
}
}
@-webkit-keyframes wrong
{
0% {
bottom: -25px
}
50% {
bottom: 0;
}
100% {
bottom: 0;
}
}
@keyframes move {
0% {
left: -10px
}
25% {
left: 10px;
}
50% {
left: -10px;
}
100% {
left: 10px;
}
}
@-webkit-keyframes move
{
0% {
left: -10px
}
25% {
left: 10px;
}
50% {
left: -10px;
}
100% {
left: 10px;
}
}
style>
head>
<body>
<div id="app" v-cloak>
<div id="rex_card" v-show="btnRexShow">
<div class="drawimg">
<div class="draw_img">
<div class="puzzle">
<p>南p>
<p>京p>
<p>天p>
<p>脉p>
<p>健p>
<p>康p>
<p>科p>
<p>技p>
<p style="background:rgba(0,0,0,0.5);">发p>
<p>展p>
<p>有p>
<p>限p>
<p>公p>
<p>司p>
<p>。p>
<div class="puzzle_only" v-show="btnright">发div>
<div class="tips">拖动滑块将图片正确拼合~div>
<div class="tips_right">恭喜您验证成功~div>
div>
<div class="puzzle_control">
<span>拖动左边滑块完成拼图span>
<p class="puzzle_btn" @mousedown="btnDragStart($event)" @touchstart="btnTochStart($event)">
<span>span>
<span>span>
<span>span>
p>
div>
div>
div>
div>
<div class="header">
<span>南京天脉健康科技发展有限公司span>
div>
<div class="msgcontent">
<div class="getmsg">
<div class="rex">
<img src="assets/images/logo.png" class="logo">
<span class="rex_icon">span>
<span class="title">产品ID验证span>
div>
<div class="getmsg_input">
<div class="input">
<span>ID编码span>
<input type="text" placeholder="请输入查询编码" v-model="inputval" @focus="onfocus">
<button class="enter" @click="submit">提交button>
div>
div>
div>
<div class="msgtips">
<img src="assets/images/link.png" alt="" class="left">
<img src="assets/images/link.png" alt="" class="right">
<span class="title">尊敬的客户您好:span>
<p v-if="productarr.产品编码 !== undefined">您当前查询的产品编码为<span class="code">{{productarr.产品编码}}span>，更多详细信息请查看下方详情，谢谢！
p>
<p v-else style="color:#f95959">{{warnmessage}}p>
div>
<div class="msgform">
<ul>
<li>
<span class="title">查询时间:span>
<span class="formcontent">{{currentTime}}span>
li>
<li>
<span class="title">查询结果:span>
<span class="formcontent">{{productResult}}span>
li>
<li>
<span class="title">唯一ID码:span>
<span class="formcontent">{{productarr.唯一ID}}span>
li>
<li>
<span class="title">产品编码:span>
<span class="formcontent">{{productarr.产品编码}}span>
li>
<li style="line-height: initial">
<span class="title" style="display: inline-block;height: 100%;line-height: 45px">产品信息:span>
<span class="formcontent">{{productarr.产品信息}}span>
li>
<li>
<span class="title">出库日期:span>
<span class="formcontent">{{productarr.出库时间}}span>
li>
<li>
<span class="title">批次号:span>
<span class="formcontent">{{productarr.批号}}span>
li>
<li>
<span class="title">收货地点:span>
<span class="formcontent">{{productarr.收货地点}}span>
li>
ul>
div>
<div style="height: 20px">div>
div>
div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
btnX: '',
warnmessage: '请输入ID编码进行查询!',
inputval: '',
productResult: '',
currentTime: '',
productClonearr: [],
productarr: [],
matcharr: [],
btnRexShow: false,
btnright: false,
pcOrMObile: '',
rightOrWrong: ''
},
mounted: function () {
this.inputval = ''
this.productClonearr = []
this.currentTime = ''
this.getMatchNums()
this.browserRedirect()
},
methods: {
onfocus: function () {
this.inputval = ''
this.productResult = ''
this.productarr = []
this.currentTime = ''
this.warnmessage = '请输入ID编码进行查询!'
},
submit: function (val) {
var that = this
$.ajax({
url: '这是个秘密这是个秘密这是个秘密',
type: 'post',
dataType: 'jsonp',
data: {
param: JSON.stringify({
onlyoneid: that.inputval,
operate: 'OnlyOne',
localtime: that.getNowFormatDate()
})
},
success: function (res) {
that.productResult = ''
if (res.ok === true) {
if (res.data.length === 0) {
that.productResult = '查无此货'
that.productarr = []
that.currentTime = ''
that.warnmessage = '请输入正确的产品ID码!'
} else {
that.btnRexShow = true
var bodyflow = document.getElementsByTagName('body')[0]
bodyflow.className = 'flowlock'
var htmlflow = document.getElementsByTagName('html')[0]
htmlflow.className = 'flowlock'
that.productClonearr = res.data[0]
that.currentTime = that.getNowFormatDate()
that.productResult = '正品'
}
} else {
that.productResult = ''
that.productClonearr = []
that.currentTime = ''
that.warnmessage = res.message
return
}
}
})
},
getNowFormatDate: function () {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
},
getMatchNums: function () {
var that = this;
that.matcharr = []
for (var i = 0; i < 4; i++) {
that.matcharr.push(Math.floor(Math.random() * 11))
}
},
browserRedirect: function () {
let that = this
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
that.pcOrMObile = 'phone'
} else {
that.pcOrMObile = 'pc'
}
},
btnDragStart: function (e) {
var that = this
if (that.pcOrMObile !== 'pc') {
return
}
that.btnright = true
var drawimg = document.getElementsByClassName('drawimg')[0]
var tips_right = document.getElementsByClassName('tips_right')[0]
var tips = document.getElementsByClassName('tips')[0]
var puzzle = document.getElementsByClassName('puzzle_btn')[0]
var maxwidth = document.getElementsByClassName('puzzle_control')[0].offsetWidth
var onlyPuzzle = document.getElementsByClassName('puzzle_only')[0]
var oEvent = e || event
that.btnX = oEvent.clientX - puzzle.offsetLeft
document.onmousemove = function (ev) {
var et = ev || event
var line = et.clientX - that.btnX
if (line < -9) {
line = -9
} else if (line > maxwidth - 51) {
line = document.documentElement.clientWidth - maxwidth.offsetWidth;
}
puzzle.style.left = line + 'px'
onlyPuzzle.style.left = line + 'px'
document.onmouseup = function () {
if (line > 180 && line < 195) {
tips_right.className += ' wrongbox'
that.rightOrWrong = 'right'
that.productarr = that.productClonearr
setTimeout(function () {
tips_right.className = 'tips_right'
}, 2000)
setTimeout(function () {
that.btnRexShow = false
var bodyflow = document.getElementsByTagName('body')[0]
var htmlflow = document.getElementsByTagName('html')[0]
bodyflow.className = ''
htmlflow.className = ''
onlyPuzzle.style.left = 0
puzzle.style.left = -9 + 'px'
}, 2100)
} else {
drawimg.className += ' movebox'
tips.className += ' wrongbox'
setTimeout(function () {
onlyPuzzle.style.left = 0
puzzle.style.left = -9 + 'px'
that.btnright = false
drawimg.className = 'drawimg'
}, 1000)
setTimeout(function () {
tips.className = 'tips'
}, 2000)
}
document.onmousemove = null
document.onmouseup = null
}
}
},
btnTochStart:function (e) {
var that = this
if (that.pcOrMObile !== 'phone') {
return
}
that.btnright = true
var puzzle = document.getElementsByClassName('puzzle_btn')[0]
var tips_right = document.getElementsByClassName('tips_right')[0]
var drawimg = document.getElementsByClassName('drawimg')[0]
var tips = document.getElementsByClassName('tips')[0]
var maxwidth = document.getElementsByClassName('puzzle_control')[0].offsetWidth
var onlyPuzzle = document.getElementsByClassName('puzzle_only')[0]
var oEvent = e.touches[0]
that.btnX = oEvent.clientX - puzzle.offsetLeft
document.ontouchmove = function (ev) {
var et = ev.touches[0]
var line = et.clientX - that.btnX
if (line < -9) {
line = -9
} else if (line > maxwidth - 51) {
line = document.documentElement.clientWidth - maxwidth.offsetWidth;
}
puzzle.style.left = line + 'px'
onlyPuzzle.style.left = line + 'px'
document.ontouchend = function () {
if (line > 180 && line < 195) {
tips_right.className += ' wrongbox'
that.rightOrWrong = 'right'
that.productarr = that.productClonearr
setTimeout(function () {
tips_right.className = 'tips_right'
}, 2000)
setTimeout(function () {
that.btnRexShow = false
onlyPuzzle.style.left = 0
puzzle.style.left = -9 + 'px'
var bodyflow = document.getElementsByTagName('body')[0]
var htmlflow = document.getElementsByTagName('html')[0]
bodyflow.className = ''
htmlflow.className = ''
}, 2100)
} else {
drawimg.className += ' movebox'
tips.className += ' wrongbox'
setTimeout(function () {
onlyPuzzle.style.left = 0
puzzle.style.left = -9 + 'px'
that.btnright = false
drawimg.className = 'drawimg'
}, 1000)
setTimeout(function () {
tips.className = 'tips'
}, 2000)
}
document.ontouchmove = null
document.ontouchend = null
}
}
}
}
})
script>
body>
html>
恩不错，正如你看到的，代码冗余，但是现在也没时间整理这个了，因为我有活儿要去干了，对了补充一下，为啥不用图片做拼图，因为canvas不会啊，所以我现在去深度学习canvas了，期待下一个版本吧