var v _timeOut = Date . parse ( new Date ( ) ) ;
function imgVer ( Config ) {
var el = eval ( Config . el ) ;
var w = Config . width ;
var h = Config . height ;
var PL _Size = 48 ;
var padding = 20 ;
var MinN _X = padding + PL _Size ;
var MaxN _X = w - padding - PL _Size - PL _Size / 6 ;
var MaxN _Y = padding ;
var MinN _Y = h - padding - PL _Size - PL _Size / 6 ;
function RandomNum ( Min , Max ) {
var Range = Max - Min ;
var Rand = Math . random ( ) ;
if ( Math . round ( Rand * Range ) == 0 ) {
return Min + 1 ;
} else if ( Math . round ( Rand * Max ) == Max ) {
return Max - 1 ;
} else {
var num = Min + Math . round ( Rand * Range ) - 1 ;
return num ;
}
}
var imgSrc = "https://cdn.yimian.ac.cn/easyVer/image.php?df=" + Math . floor ( Math . random ( ) * 10 ) ;
v _timeOut = Date . parse ( new Date ( ) ) ;
var X = RandomNum ( MinN _X , MaxN _X ) ;
var Y = RandomNum ( MinN _Y , MaxN _Y ) ;
var left _Num = - X + 10 ;
var html = '<div style="position:relative;padding:16px 16px 28px;border:1px solid #ddd;background:#f2ece1;border-radius:16px;">' ;
html += '<div style="position:relative;overflow:hidden;width:' + w + 'px;">' ;
html += '<div style="position:relative;width:' + w + 'px;height:' + h + 'px;">' ;
html += '<img id="scream" src="' + imgSrc + '" style="width:' + w + 'px;height:' + h + 'px;">' ;
html += '<canvas id="puzzleBox" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:22;"></canvas>' ;
html += '</div>' ;
html += '<div id="kuang" class="puzzle-lost-box" style="position:absolute;width:' + w + 'px;height:' + h + 'px;top:0;left:' + left _Num + 'px;z-index:111;">' ;
html += '<canvas id="puzzleShadow" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:22;"></canvas>' ;
html += '<canvas id="puzzleLost" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:33;"></canvas>' ;
html += '</div>' ;
html += '<p class="ver-tips"></p>' ;
html += '</div>' ;
html += '<div class="re-btn"><a></a></div>' ;
html += '</div>' ;
html += '<br>' ;
html += '<div style="position:relative;width:' + w + 'px;margin:auto;">' ;
html += '<div style="border:1px solid #c3c3c3;border-radius:24px;background:#ece4dd;box-shadow:0 1px 1px rgba(12,10,10,0.2) inset;">' ;
html += '<p style="font-size:12px;color: #486c80;line-height:28px;margin:0;text-align:right;padding-right:22px;">Slide block to finish the jigsaw..</p>' ;
html += '</div>' ;
html += '<div class="slider-btn"></div>' ;
html += '</div>' ;
el . html ( html ) ;
var d = PL _Size / 3 ;
var c = document . getElementById ( "puzzleBox" ) ;
var ctx = c . getContext ( "2d" ) ;
ctx . globalCompositeOperation = "xor" ;
ctx . shadowBlur = 10 ;
ctx . shadowColor = "#fff" ;
ctx . shadowOffsetX = 3 ;
ctx . shadowOffsetY = 3 ;
ctx . fillStyle = "rgba(0,0,0,0.7)" ;
ctx . beginPath ( ) ;
ctx . lineWidth = "1" ;
ctx . strokeStyle = "rgba(0,0,0,0)" ;
ctx . moveTo ( X , Y ) ;
ctx . lineTo ( X + d , Y ) ;
ctx . bezierCurveTo ( X + d , Y - d , X + 2 * d , Y - d , X + 2 * d , Y ) ;
ctx . lineTo ( X + 3 * d , Y ) ;
ctx . lineTo ( X + 3 * d , Y + d ) ;
ctx . bezierCurveTo ( X + 2 * d , Y + d , X + 2 * d , Y + 2 * d , X + 3 * d , Y + 2 * d ) ;
ctx . lineTo ( X + 3 * d , Y + 3 * d ) ;
ctx . lineTo ( X , Y + 3 * d ) ;
ctx . closePath ( ) ;
ctx . stroke ( ) ;
ctx . fill ( ) ;
var c _l = document . getElementById ( "puzzleLost" ) ;
var c _s = document . getElementById ( "puzzleShadow" ) ;
var ctx _l = c _l . getContext ( "2d" ) ;
var ctx _s = c _s . getContext ( "2d" ) ;
var img = new Image ( ) ;
img . src = imgSrc ;
img . onload = function ( ) {
ctx _l . drawImage ( img , 0 , 0 , w , h ) ;
}
ctx _l . beginPath ( ) ;
ctx _l . strokeStyle = "rgba(0,0,0,0)" ;
ctx _l . moveTo ( X , Y ) ;
ctx _l . lineTo ( X + d , Y ) ;
ctx _l . bezierCurveTo ( X + d , Y - d , X + 2 * d , Y - d , X + 2 * d , Y ) ;
ctx _l . lineTo ( X + 3 * d , Y ) ;
ctx _l . lineTo ( X + 3 * d , Y + d ) ;
ctx _l . bezierCurveTo ( X + 2 * d , Y + d , X + 2 * d , Y + 2 * d , X + 3 * d , Y + 2 * d ) ;
ctx _l . lineTo ( X + 3 * d , Y + 3 * d ) ;
ctx _l . lineTo ( X , Y + 3 * d ) ;
ctx _l . closePath ( ) ;
ctx _l . stroke ( ) ;
ctx _l . shadowBlur = 10 ;
ctx _l . shadowColor = "black" ;
ctx _l . clip ( ) ;
ctx _s . beginPath ( ) ;
ctx _s . lineWidth = "1" ;
ctx _s . strokeStyle = "rgba(0,0,0,0)" ;
ctx _s . moveTo ( X , Y ) ;
ctx _s . lineTo ( X + d , Y ) ;
ctx _s . bezierCurveTo ( X + d , Y - d , X + 2 * d , Y - d , X + 2 * d , Y ) ;
ctx _s . lineTo ( X + 3 * d , Y ) ;
ctx _s . lineTo ( X + 3 * d , Y + d ) ;
ctx _s . bezierCurveTo ( X + 2 * d , Y + d , X + 2 * d , Y + 2 * d , X + 3 * d , Y + 2 * d ) ;
ctx _s . lineTo ( X + 3 * d , Y + 3 * d ) ;
ctx _s . lineTo ( X , Y + 3 * d ) ;
ctx _s . closePath ( ) ;
ctx _s . stroke ( ) ;
ctx _s . shadowBlur = 20 ;
ctx _s . shadowColor = "black" ;
ctx _s . fill ( ) ;
var moveStart = '' ;
$ ( ".slider-btn" ) . mousedown ( function ( e ) {
e = e || window . event ;
$ ( this ) . css ( {
"background-position" : "0 -216px"
} ) ;
moveStart = e . pageX ;
} ) ;
$ ( ".slider-btn" ) . on ( "touchstart" , function ( e ) {
e = e || window . event ;
$ ( this ) . css ( {
"background-position" : "0 -216px"
} ) ;
moveStart = e . targetTouches [ 0 ] . pageX ;
} ) ;
onmousemove = function ( e ) {
e = e || window . event ;
var moveX = e . pageX ;
var d = moveX - moveStart ;
if ( moveStart == '' ) { } else {
if ( d < 0 || d > ( w - padding - PL _Size ) ) { } else {
$ ( ".slider-btn" ) . css ( {
"left" : d + 'px' ,
"transition" : "inherit"
} ) ;
$ ( "#puzzleLost" ) . css ( {
"left" : d + 'px' ,
"transition" : "inherit"
} ) ;
$ ( "#puzzleShadow" ) . css ( {
"left" : d + 'px' ,
"transition" : "inherit"
} ) ;
}
}
} ;
//add var for touchend to get location
var touch _pageX ;
$ ( ".slider-btn" ) . on ( "touchmove" , function ( e ) {
e = e || window . event ;
var moveX = e . targetTouches [ 0 ] . pageX ;
touch _pageX = moveX ;
var d = moveX - moveStart ;
if ( moveStart == '' ) { } else {
if ( d < 0 || d > ( w - padding - PL _Size ) ) { } else {
$ ( ".slider-btn" ) . css ( {
"left" : d + 'px' ,
"transition" : "inherit"
} ) ;
$ ( "#puzzleLost" ) . css ( {
"left" : d + 'px' ,
"transition" : "inherit"
} ) ;
$ ( "#puzzleShadow" ) . css ( {
"left" : d + 'px' ,
"transition" : "inherit"
} ) ;
}
}
} ) ;
onmouseup = function ( e ) {
e = e || window . event ;
var moveEnd _X = e . pageX - moveStart ;
var ver _Num = X - 10 ;
var deviation = 4 ;
var Min _left = ver _Num - deviation ;
var Max _left = ver _Num + deviation ;
if ( moveStart == '' ) { } else {
if ( Max _left > moveEnd _X && moveEnd _X > Min _left ) {
$ ( ".ver-tips" ) . html ( '<i style="background-position:-4px -1207px;"></i><span style="color:#42ca6b;">Authority Confimed! Only use ' + ( Date . parse ( new Date ( ) ) - v _timeOut ) / 1000 + 's!</span><span></span>' ) ;
$ ( ".ver-tips" ) . addClass ( "slider-tips" ) ;
$ ( ".puzzle-lost-box" ) . addClass ( "hidden" ) ;
$ ( "#puzzleBox" ) . addClass ( "hidden" ) ;
setTimeout ( function ( ) {
$ ( ".ver-tips" ) . removeClass ( "slider-tips" ) ;
imgVer ( Config ) ; easyVer _off ( ) ;
} ,
2000 ) ;
Config . success ( ) ;
} else {
$ ( ".ver-tips" ) . html ( '<i style="background-position:-4px -1229px;"></i><span style="color:red;">Verification Failure!</span><span style="margin-left:4px;">Please drag block to the right position!</span>' ) ;
$ ( ".ver-tips" ) . addClass ( "slider-tips" ) ;
setTimeout ( function ( ) {
$ ( ".ver-tips" ) . removeClass ( "slider-tips" ) ;
document . getElementById ( "scream" ) . src = "https://cdn.yimian.ac.cn/easyVer/image.php?df=" + Math . floor ( Math . random ( ) * 10 ) ;
imgVer ( Config ) ; v _timeOut = Date . parse ( new Date ( ) ) ;
} ,
2000 ) ;
Config . error ( ) ;
}
}
setTimeout ( function ( ) {
$ ( ".slider-btn" ) . css ( {
"left" : '0' ,
"transition" : "left 0.5s"
} ) ;
$ ( "#puzzleLost" ) . css ( {
"left" : '0' ,
"transition" : "left 0.5s"
} ) ;
$ ( "#puzzleShadow" ) . css ( {
"left" : '0' ,
"transition" : "left 0.5s"
} ) ;
} ,
1000 ) ;
$ ( ".slider-btn" ) . css ( {
"background-position" : "0 -84px"
} ) ;
moveStart = '' ;
$ ( ".re-btn a" ) . on ( "click" ,
function ( ) {
imgVer ( Config ) ;
} )
}
$ ( ".slider-btn" ) . on ( "touchend" , function ( e ) {
e = e || window . event ;
var moveEnd _X = touch _pageX - moveStart ;
var ver _Num = X - 10 ;
var deviation = 4 ;
var Min _left = ver _Num - deviation ;
var Max _left = ver _Num + deviation ;
if ( moveStart == '' ) { } else {
if ( Max _left > moveEnd _X && moveEnd _X > Min _left ) {
$ ( ".ver-tips" ) . html ( '<i style="background-position:-4px -1207px;"></i><span style="color:#42ca6b;">Authority Confimed! Only use ' + ( Date . parse ( new Date ( ) ) - v _timeOut ) / 1000 + 's!</span><span></span>' ) ;
$ ( ".ver-tips" ) . addClass ( "slider-tips" ) ;
$ ( ".puzzle-lost-box" ) . addClass ( "hidden" ) ;
$ ( "#puzzleBox" ) . addClass ( "hidden" ) ;
setTimeout ( function ( ) {
$ ( ".ver-tips" ) . removeClass ( "slider-tips" ) ;
imgVer ( Config ) ; easyVer _off ( ) ;
} ,
2000 ) ;
Config . success ( ) ;
} else {
$ ( ".ver-tips" ) . html ( '<i style="background-position:-4px -1229px;"></i><span style="color:red;">Verification Failure!</span><span style="margin-left:4px;">Please drag block to the right position!</span>' ) ;
$ ( ".ver-tips" ) . addClass ( "slider-tips" ) ;
setTimeout ( function ( ) {
$ ( ".ver-tips" ) . removeClass ( "slider-tips" ) ;
document . getElementById ( "scream" ) . src = "https://cdn.yimian.ac.cn/easyVer/image.php?df=" + Math . floor ( Math . random ( ) * 10 ) ;
imgVer ( Config ) ; v _timeOut = Date . parse ( new Date ( ) ) ;
} ,
2000 ) ;
Config . error ( ) ;
}
}
setTimeout ( function ( ) {
$ ( ".slider-btn" ) . css ( {
"left" : '0' ,
"transition" : "left 0.5s"
} ) ;
$ ( "#puzzleLost" ) . css ( {
"left" : '0' ,
"transition" : "left 0.5s"
} ) ;
$ ( "#puzzleShadow" ) . css ( {
"left" : '0' ,
"transition" : "left 0.5s"
} ) ;
} ,
1000 ) ;
$ ( ".slider-btn" ) . css ( {
"background-position" : "0 -84px"
} ) ;
moveStart = '' ;
$ ( ".re-btn a" ) . on ( "click" ,
function ( ) {
imgVer ( Config ) ;
} )
} ) ;
}
var callBackFunctionName = "" ;
$ ( ".verBox" ) . html ( "<div id=\"imgVer\" style=\"display:inline-block;\"></div>" ) ;
function easyVer ( ) {
$ ( ".verBox" ) . css ( {
"left" : "404px" ,
"opacity" : "0" ,
"z-index" : "9999"
} )
imgVer ( {
el : '$("#imgVer")' ,
width : '260' ,
height : '116' ,
success : function ( ) {
if ( callBackFunctionName ) eval ( callBackFunctionName + "()" )
} ,
error : function ( ) { }
} )
}
function easyVer _off ( ) {
$ ( ".verBox" ) . css ( {
"left" : "404px" ,
"opacity" : "0" ,
"z-index" : "-100"
} )
$ ( ".verBox" ) . css ( {
"left" : "0px" ,
"opacity" : "0"
} )
}
console . log ( '\n' + ' %c easyVer Vertification Plugin %c https://github.com/hhCandy/easyVer ' + '\n' , 'color: #00FFFF; background: #030307; padding:5px 0;' , 'background: #4682B4; padding:5px 0;' ) ;
function show _easyVer ( ) {
$ ( ".verBox" ) . css ( {
"left" : "0" ,
"opacity" : "1"
} )
}