さまざまな種類の jQuery Web ページ検証コード プラグイン コード例

さまざまな種類の jQuery Web ページ検証コード プラグイン コード例

html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ">
<title>jQuery Web 検証コード プラグイン</title>
<link rel="スタイルシート" type="text/css" href="css/verify.css" rel="外部 nofollow" >
</head>
<本文>
<h3>デジタル認証コード</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">確認</button>
<h3 style="margin-top: 20px">算術検証コード</h3>
<div id="mpanel3"></div>
<button type="button" id="check-btn2" class="verify-btn">確認</button>
 
<h3 style="margin-top: 20px">スライド認証コード</h3>
<div id="mpanel1" ></div>
 
<h3 style="margin-top: 20px">パズル認証コード</h3>
<div id="mpanel4"></div>
 
<h3 style="margin-top:30px;">確認コードをクリックしてください</h3>
<div id="mpanel5">
</div>
<div id="mpanel6" style="margin-top:30px;">
</div>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js" ></script>
<script type="text/javascript">
	$('#mpanel2').codeVerify({
		タイプ: 1,
		幅: '200px'、
		高さ: '50px'、
		フォントサイズ: '30px',
		コード長: 6,
		btnId : 'チェックボタン',
		準備完了: 関数() {
		},
		成功: 関数() {
			alert('一致を確認してください!');
		},
		エラー: 関数() {
			alert('認証コードが一致しません!');
		}
	});
 
	$('#mpanel3').codeVerify({
		タイプ: 2,
		figure : 50, //桁数、type=2 の場合にのみ有効 arith : 0, //アルゴリズム、加算、減算、乗算をサポートします。空白の場合はランダム、type=2 の場合にのみ有効 width : '200px',
		高さ: '50px'、
		フォントサイズ: '30px',
		btnId : 'check-btn2',
		準備完了: 関数() {
		},
		成功: 関数() {
			alert('一致を確認してください!');
		},
		エラー: 関数() {
			alert('認証コードが一致しません!');
		}
	});
 
	$('#mpanel1').slideVerify({
		type : 1, //タイプ vOffset : 5, //エラー量、必要に応じて調整 barSize : {
			幅: '50%'、
			高さ: '40px'、
		},
		準備完了: 関数() {
		},
		成功: 関数() {
			alert('検証に成功しました。独自のコードを追加してください!');
			//......後続の操作 },
		エラー: 関数() {
// alert('検証に失敗しました!');
		}
 
	});
	$('#mpanel4').slideVerify({
		type : 2, //type vOffset : 5, //error、必要に応じて調整 vSpace : 5, //interval imgName : ['1.jpg', '2.jpg'],
		画像サイズ:{
			幅: '300px'、
			高さ: '200px'、
		},
		ブロックサイズ:{
			幅: '40px'、
			高さ: '40px'、
		},
		バーサイズ:{
			幅: '300px'、
			高さ: '40px'、
		},
		準備完了: 関数() {
		},
		成功: 関数() {
			alert('検証に成功しました。独自のコードを追加してください!');
			//......後続の操作 },
		エラー: 関数() {
// alert('検証に失敗しました!');
		}
 
	});
 
 
	$('#mpanel5').pointsVerify({
		defaultNum : 4, //デフォルトの文字数 checkNum : 2, //検証文字数 vSpace : 5, //間隔 imgName : ['1.jpg', '2.jpg'],
		画像サイズ:{
			幅: '400px',
			高さ: '200px'、
		},
		バーサイズ:{
			幅: '400px'、
			高さ: '40px'、
		},
		準備完了: 関数() {
		},
		成功: 関数() {
			alert('検証に成功しました。独自のコードを追加してください!');
			//......後続の操作 },
		エラー: 関数() {
// alert('検証に失敗しました!');
		}
 
	});
 
	$('#mpanel6').pointsVerify({
		defaultNum : 4, //デフォルトの文字数 checkNum : 2, //検証文字数 vSpace : 5, //間隔 imgName : ['1.jpg', '2.jpg'],
		画像サイズ:{
			幅: '400px',
			高さ: '200px'、
		},
		バーサイズ:{
			幅: '400px'、
			高さ: '40px'、
		},
		準備完了: 関数() {
		},
		成功: 関数() {
			alert('検証に成功しました。独自のコードを追加してください!');
			//......後続の操作 },
		エラー: 関数() {
// alert('検証に失敗しました!');
		}
	});
 
</スクリプト>
 
</本文>
</html>

検証.css

/*通常の確認コード*/
.検証コード{
	フォントサイズ: 20px;
	テキスト配置: 中央;
	カーソル: ポインタ;
	下部マージン: 5px;
	境界線: 1px 実線 #ddd;
}
 
.cerify-コードパネル{
	高さ:100%;
	オーバーフロー:非表示;
}
 
.コードエリアを確認する {
	フロート:左;
}
 
.入力エリアを確認する {
	フロート: 左;
	幅: 60%;
	右パディング: 10px;
}
.変更領域を確認する {
	行の高さ: 30px;
	フロート: 左;
}
.入力コードを確認する{
	表示:インラインブロック;
	幅: 100%;
	高さ: 25px;
}
 
.変更コードの確認{
	色: #337AB7;
	カーソル: ポインタ;
}
 
.検証ボタン{
	幅: 200ピクセル;
	高さ: 30px;
	背景色: #337AB7;
	色:#FFFFFF;
	境界線:なし;
	上マージン: 10px;
}
 
 
 
 
 
 
/*スライド認証コード*/
.検証バー領域 {
 位置: 相対的;
 背景: #FFFFFF;
 	テキスト配置: 中央;
 -webkit-box-sizing: コンテンツボックス;
 -moz-box-sizing: コンテンツボックス;
 ボックスのサイズ: コンテンツボックス;
 	境界線: 1px 実線 #ddd;
 	-webkit-border-radius: 4px;
}
 
.verify-bar-area .verify-move-block {
 位置: 絶対;
 上: 0px;
 左: 0;
 背景: #fff;
 カーソル: ポインタ;
 -webkit-box-sizing: コンテンツボックス;
 -moz-box-sizing: コンテンツボックス;
 ボックスのサイズ: コンテンツボックス;
 ボックスの影: 0 0 2px #888888;
 -webkit-border-radius: 1px;
}
 
.verify-bar-area .verify-move-block:hover {
 背景色: #337ab7;
 色: #FFFFFF;
}
 
.verify-bar-area .verify-left-bar {
 位置: 絶対;
 上: -1px;
 左: -1px;
 	背景: #f0fff0;
 カーソル: ポインタ;
 -webkit-box-sizing: コンテンツボックス;
 -moz-box-sizing: コンテンツボックス;
 ボックスのサイズ: コンテンツボックス;
 境界線: 1px 実線 #ddd;
}
 
.verify-img-panel {
	マージン:0;
	-webkit-box-sizing: コンテンツボックス;
 -moz-box-sizing: コンテンツボックス;
 ボックスのサイズ: コンテンツボックス;
	境界線: 1px 実線 #ddd;
	境界線の半径: 3px;
	位置: 相対的;
}
 
.verify-img-panel .verify-refresh {
	幅: 25px;
	高さ: 25px;
	テキスト配置:中央;
	パディング: 5px;
	カーソル: ポインタ;
	位置: 絶対;
	上: 0;
	右: 0;
	zインデックス: 2;
}
 
.verify-img-panel .icon-refresh {
	フォントサイズ: 20px;
	色: #fff;
}
 
.verify-img-panel .verify-gap {
	背景色: #fff;
	位置: 相対的;
	zインデックス: 2;
	境界線:1px実線 #fff;
}
 
.verify-bar-area .verify-move-block .verify-sub-block {
	位置: 絶対;
 テキスト配置: 中央;
	zインデックス: 3;
	境界線: 1px 実線 #fff;
}
 
.verify-bar-area .verify-move-block .verify-icon {
	フォントサイズ: 18px;
}
 
.検証バーエリア .検証メッセージ {
	zインデックス:3;
}
 
/*フォントアイコンcss*/
@font-face {font-family: "アイコンフォント";
 ソース: url('../fonts/iconfont.eot?t=1508229193188'); /* IE9*/
 src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
 url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), /* chrome、firefox、opera、Safari、Android、iOS 4.2+*/
 url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); /* iOS 4.1以降 */
}
 
.アイコンフォント{
 フォントファミリ:"アイコンフォント" !重要;
 フォントサイズ:16px;
 フォントスタイル:通常;
 -webkit-font-smoothing: アンチエイリアス;
 -moz-osx-font-smoothing: グレースケール;
}
 
.icon-check:before { コンテンツ: "\e645"; }
 
.icon-close:before { コンテンツ: "\e646"; }
 
.icon-right:before { コンテンツ: "\e6a3"; }
 
.icon-refresh:before { コンテンツ: "\e6a4"; }

検証.js

/*! Verify-v0.1.0 MIT ライセンス by Big Bear*/
 
;(関数($, ウィンドウ, ドキュメント, 未定義) {
 
	//Codeのコンストラクタを定義する var Code = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 	タイプ: 1,
 	figure : 100, //桁数、type=2 の場合にのみ有効 arith : 0, //アルゴリズム、加算、減算、乗算をサポートします。0 はランダム、type=2 の場合にのみ有効 width : '200px',
		 高さ: '60px'、
		 フォントサイズ: '30px',
 	コード長: 6,
 	btnId : 'チェックボタン',
 	準備完了: 関数(){},
 	成功: function(){},
  エラー: 関数(){}
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 var _code_chars = [0、1、3、4、5、6、7、8、9、 'a'、 'b'、 'd'、 'e'、 'g'、 'h'、 'i' '' '' '' '' '' '' '、' y '、' z ''、 'a'、 'b'、c '、' d '、' e '、' f '、' h '、' i '、' j '' '' '' '' '' '' '' '' '' n '、' o '、' o '、' o '、' p ''、 'r'、 's
 var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
 var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
 
 //コードメソッドを定義する Code.prototype = {
 	初期化:関数() {
			var _this = これ;
			このメソッドは、Dom をロードするときに使用します。
			コードを設定します。
			オプションを準備します。
			this.$element[0].onselectstart = document.body.ondrag = function(){
				false を返します。
			};
			//確認コードをクリック this.$element.find('.verify-code, .verify-change-code').on('click', function() {
				_this.setCode();
			});
			//クリックイベントを確認する this.htmlDoms.code_btn.on('click', function() {
				_this.checkCode();
			});
 	},
 
 	//ページをロードする loadDom : function() {
 		var panelHtml = '<div class="cerify-code-panel">\
  <div class="検証コード"></div>\
  <div class="検証コードエリア">\
   <div class="検証入力エリア">\
   <input type="text" class="入力コードを確認する"/>\
   </div>\
   <div class="変更エリアを検証">\
   <a class="verify-change-code">1 つ変更</a>\
   </div>\
  </div>\
  </div>';
 	this.$element.append(panelHtml);
 
 	this.htmlDoms = {
 		code_btn : $('#'+this.options.btnId)、
 		コード: this.$element.find('.verify-code'),
 		コード領域: this.$element.find('.verify-code-area'),
 		code_input : this.$element.find('.varify-input-code'),
 	};
 
 	this.htmlDoms.code.css({'width':this.options.width, 'height':this.options.height,'line-height':this.options.height, 'font-size':this.options.fontSize});
 	this.htmlDoms.code_area.css({'width':this.options.width});
 	},
 
 	//検証コードを設定する setCode : function() {
 		var color1Num = Math.floor(Math.random() * 3);
 		var color2Num = Math.floor(Math.random() * 5);
 
 		this.htmlDoms.code.css({'background-color': _code_color1[color1Num], 'color': _code_color2[color2Num]});
 		this.htmlDoms.code_input.val('');
 
 		var コード = '';
 		this.code_chose = '';
 
 		if(this.options.type == 1) { //通常の検証コード for(var i = 0; i < this.options.codeLength; i++) {
					var charNum = Math.floor(Math.random() * 52);
					var tmpStyle = (charNum%2 ==0)? "font-style:italic;margin-right: 10px;":"font-weight:bolder;";
					tmpStyle += (Math.floor(Math.random() * 2) == 1)? "font-weight: bolder;":"";
					this.code_chose += _code_chars[charNum];
					コード += '<font style="'+tmpStyle+'">'+_code_chars[charNum]+'</font>';
				}
 		}else { //アルゴリズム検証コード var num1 = Math.floor(Math.random() * this.options.figure);
 			var num2 = Math.floor(Math.random() * this.options.figure);
 
 			if(this.options.arith == 0) {
 				var tmparith = Math.floor(Math.random() * 3);
 			}
 
 			スイッチ(tmparith) {
 				ケース1:
 					this.code_chose = parseInt(num1) + parseInt(num2);
 					コード = num1 + ' + ' + num2 + ' = ?';
 					壊す;
 				ケース2:
 					if(parseInt(num1) < parseInt(num2)) {
 						var tmpnum = num1;
 						数値1 = 数値2;
 						num2 = tmpnum;
 					}
 					this.code_chose = parseInt(num1) - parseInt(num2);
 					コード = num1 + ' - ' + num2 + ' = ?';
 					壊す;
 				デフォルト :
 					this.code_chose = parseInt(num1) * parseInt(num2);
 					コード = num1 + ' × ' + num2 + ' = ?';
 					壊す;
 			}
 		}
 
 		this.htmlDoms.code.html(コード);
 
 	},
 
 	//検証コードを比較する checkCode : function() {
 		if(this.options.type == 1) { //通常の検証コード var own_input = this.htmlDoms.code_input.val().toUpperCase();
 			this.code_chose = this.code_chose.toUpperCase();
 		}それ以外 {
 			var own_input = this.htmlDoms.code_input.val();
 		}
 
 		(自分の入力がthis.code_choseの場合){
 			this.options.success();
 		}それ以外 {
 			this.options.error();
 			コードを設定します。
 		}
 	}
 };
 
 
 //Slideのコンストラクタを定義する var Slide = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 
 	タイプ: 1,
 	vオフセット: 5,
  vスペース: 5,
  画像名: ['1.jpg', '2.jpg'],
  画像サイズ:{
	 	幅: '400px',
	 	高さ: '200px'、
	 },
	 ブロックサイズ:{
	 	幅: '50px'、
	 	高さ: '50px'、
	 },
	 バーサイズ:{
	 	幅: '400px'、
	 	高さ: '40px'、
	 },
  準備完了: 関数(){},
 	成功: function(){},
  エラー: 関数(){}
 
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 
 
 //Slideのメソッドを定義する Slide.prototype = {
 
 初期化: 関数() {
 	var _this = これ;
 
 	//ページをロードします this.loadDom();
 	オプションを準備します。
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				false を返します。
			};
 
 	// this.htmlDoms.move_block.on('touchstart', function(e) { を押します
 		_this.start(e);
 	});
 
 	this.htmlDoms.move_block.on('mousedown', function(e) {
 		_this.start(e);
 	});
 
 	//Dragwindow.addEventListener("touchmove", function(e) {
  	_this.move(e);
  });
  window.addEventListener("mousemove", 関数(e) {
  	_this.move(e);
  });
 
  //マウスを離す window.addEventListener("touchend", function() {
  	_this.end();
  });
  window.addEventListener("mouseup", 関数() {
  	_this.end();
  });
 
  //Refresh_this.$element.find('.verify-refresh').on('click', function() {
  	_this.refresh();
  });
 },
 
 // 読み込みを初期化する loadDom : function() {
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //ランダムな背景画像 var panelHtml = '';
 	var tmpHtml = '';
 
 	if(this.options.type != 1) { //画像スライドパネルHtml += '<div class="verify-img-panel">\
  <div class="verify-refresh">\
   <i class="iconfont icon-refresh"></i>\
  </div>\
   <div class="verify-gap"></div>\
  </div>';
 		tmpHtml = '<div class="verify-sub-block"></div>';
 	}
 
 	パネルHtml += '<div class="verify-bar-area">\
  <span class="verify-msg">認証を完了するには右にスワイプしてください</span>\
  <div class="verify-left-bar">\
  <span class="verify-msg"></span>\
  <div class="verify-move-block">\
  <i class="verify-icon iconfont icon-right"></i>'+tmpHtml+'</div></div></div>';
 	this.$element.append(panelHtml);
 
 	this.htmlDoms = {
 		ギャップ: this.$element.find('.verify-gap'),
 		サブブロック: this.$element.find('.verify-sub-block'),
 		img_panel: this.$element.find('.verify-img-panel'),
 		bar_area : this.$element.find('.verify-bar-area'),
 		move_block : this.$element.find('.verify-move-block'),
 		left_bar : this.$element.find('.verify-left-bar'),
 		メッセージ: this.$element.find('.verify-msg'),
 		アイコン: this.$element.find('.verify-icon'),
 		更新: this.$element.find('.verify-refresh')
 	};
 
 	this.status = false; //マウスの状態 this.setSize = this.resetSize(this); //幅と高さをリセット this.htmlDoms.gap.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
 	this.htmlDoms.sub_block.css({'width': this.options.blockSize.width, 'height': this.options.blockSize.height});
 	this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
 	this.htmlDoms.bar_area.css({'width': this.setSize.bar_width, 'height': this.options.barSize.height, 'line-height':this.options.barSize.height});
 	this.htmlDoms.move_block.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
 	this.htmlDoms.left_bar.css({'width': this.options.barSize.height, 'height': this.options.barSize.height});
 
 	この.randSet();
 },
 
 //マウスプレス開始: function(e) {
 	this.htmlDoms.msg.text('');
 	this.htmlDoms.move_block.css('背景色', '#337ab7');
 	this.htmlDoms.left_bar.css('border-color', '#337AB7');
 	this.htmlDoms.icon.css('color', '#fff');
 	e.stopPropagation();
 	this.status = true;
 },
 //マウスの移動 move: function(e) {
 	if(このステータス) {
	  if(!e.touches) { // モバイル端末と互換性があります var x = e.clientX;
	  }else { //PCと互換性あり var x = e.touches[0].pageX;
	  }
	  var bar_area_left = Slide.prototype.getLeft(this.htmlDoms.bar_area[0]);
	  var move_block_left = x - bar_area_left; //親要素に対する小さい四角形の左の値 if(this.options.type != 1) { //画像のスライド if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2) {
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.blockSize.width)/2) - 2;
	  	}
	  }else { //通常のスライド if(move_block_left >= this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3) {
	  		this.$element.find('.verify-msg:eq(1)').text('リリース検証');
	  	move_block_left = this.htmlDoms.bar_area[0].offsetWidth - parseInt(parseInt(this.options.barSize.height)/2) + 3;
	  	}それ以外 {
	  		this.$element.find('.verify-msg:eq(1)').text('');
	  	}
	  }
 
 
	  ブロックを左に動かす <= 0 の場合
  		ブロックを左に移動する = parseInt(parseInt(this.options.blockSize.width)/2);
  	}
 
	  //ドラッグ後の小さな四角形の左の値 this.htmlDoms.move_block.css('left', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	  this.htmlDoms.left_bar.css('width', move_block_left-parseInt(parseInt(this.options.blockSize.width)/2) + "px");
	 }
 },
 
 //マウスを離す end: function() {
 
 	var _this = これ;
 
 	//重複しているかどうかを判定する if(this.status) {
 
 		if(this.options.type != 1) { //画像スライド var vOffset = parseInt(this.options.vOffset);
		  if(parseInt(this.htmlDoms.gap.css('left')) >= (parseInt(this.htmlDoms.move_block.css('left')) - vOffset) && parseInt(this.htmlDoms.gap.css('left')) <= (parseInt(this.htmlDoms.move_block.css('left')) + vOffset)) {
		  	this.htmlDoms.move_block.css('背景色', '#5cb85c');
		  	this.htmlDoms.left_bar.css({'border-color': '#5cb85c', 'background-color': '#fff'});
		  	this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-check');
		  	this.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('mousedown touchstart');
		  	this.options.success();
		  }それ以外{
		  	this.htmlDoms.move_block.css('背景色', '#d9534f');
		  	this.htmlDoms.left_bar.css('border-color', '#d9534f');
		  	this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('アイコンを閉じる');
 
		  	setTimeout(関数() {
					 	_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('背景色', '#fff');
					 	_this.htmlDoms.icon.css('color', '#000');
					 	_this.htmlDoms.icon.removeClass('icon-close');
		  		_this.htmlDoms.icon.addClass('icon-right');
		  		_this.$element.find('.verify-msg:eq(0)').text('認証を完了するには右にスワイプしてください');
 
					 }, 400);
 
		  	this.options.error();
		  }
 
 		}else { //通常のスライド if(parseInt(this.htmlDoms.move_block.css('left')) >= (parseInt(this.setSize.bar_width) - parseInt(this.options.barSize.height) - parseInt(this.options.vOffset))) {
 				this.htmlDoms.move_block.css('背景色', '#5cb85c');
 				this.htmlDoms.left_bar.css({'color': '#4cae4c', 'border-color': '#5cb85c', 'background-color': '#fff' });
 				this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('icon-check');
		  	this.htmlDoms.refresh.hide();
		  	this.htmlDoms.move_block.unbind('mousedown');
		  	this.htmlDoms.move_block.unbind('touchstart');
 				this.$element.find('.verify-msg:eq(1)').text('検証に成功しました');
 				this.options.success();
 			}それ以外 {
 
 				this.htmlDoms.move_block.css('背景色', '#d9534f');
		  	this.htmlDoms.left_bar.css('border-color', '#d9534f');
		  	this.htmlDoms.icon.css('color', '#fff');
		  	this.htmlDoms.icon.removeClass('icon-right');
		  	this.htmlDoms.icon.addClass('アイコンを閉じる');
 
		  	setTimeout(関数() {
					 	_this.htmlDoms.move_block.animate({'left':'0px'}, 'fast');
					 	_this.htmlDoms.left_bar.animate({'width': '40px'}, 'fast');
					 	_this.htmlDoms.left_bar.css({'border-color': '#ddd'});
 
					 	_this.htmlDoms.move_block.css('背景色', '#fff');
					 	_this.htmlDoms.icon.css('color', '#000');
					 	_this.htmlDoms.icon.removeClass('icon-close');
		  		_this.htmlDoms.icon.addClass('icon-right');
		  		_this.$element.find('.verify-msg:eq(0)').text('右にスライドしてロックを解除します');
 
					 }, 400);
 
		  	this.options.error();
 			}
 		}
 
	  this.status = false;
 	}
 },
 
 
 リセットサイズ:関数(obj) {
 	var img_width,img_height,bar_width,bar_height; //画像の幅、高さ、モバイルバーの幅、高さ var parentWidth = obj.$element.parent().width() || $(window).width();
 	var parentHeight = obj.$element.parent().height() || $(window).height();
 
 		if(obj.options.imgSize.width.indexOf('%')!= -1){
 		img_width = parseInt(obj.options.imgSize.width)/100 * parentWidth + 'px';
		  }それ以外 {
				img_width = obj.options.imgSize.width;
			}
 
			if(obj.options.imgSize.height.indexOf('%')!= -1){
 		img_height = parseInt(obj.options.imgSize.height)/100 * parentHeight + 'px';
		  }それ以外 {
				img_height = obj.options.imgSize.height;
			}
 
			if(obj.options.barSize.width.indexOf('%')!= -1){
 		bar_width = parseInt(obj.options.barSize.width)/100 * parentWidth + 'px';
		  }それ以外 {
				bar_width = obj.options.barSize.width;
			}
 
			if(obj.options.barSize.height.indexOf('%')!= -1){
 		bar_height = parseInt(obj.options.barSize.height)/100 * parentHeight + 'px';
		  }それ以外 {
				bar_height = obj.options.barSize.height;
			}
 
			{img_width: img_width、img_height: img_height、bar_width: bar_width、bar_height: bar_height} を返します。
 	},
 
 //ランダムな誕生点 randSet: function() {
 	var rand1 = Math.floor(Math.random()*9+1);
 	var rand2 = Math.floor(Math.random()*9+1);
 	var top = rand1 * parseInt(this.setSize.img_height)/15 + parseInt(this.setSize.img_height) * 0.1;
 	var left = rand2 * parseInt(this.setSize.img_width)/15 + parseInt(this.setSize.img_width) * 0.1;
 
 	this.$element.find('.verify-img-panel').css('margin-bottom', this.options.vSpace + 'px');
 	this.$element.find('.verify-gap').css({'top': 上、 'left': 左});
  	this.$element.find('.verify-sub-block').css({'top':'-'+(parseInt(this.setSize.img_height)- top + this.options.vSpace + 2)+'px', 'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height,'background-position-y': '-'+top+ 'px', 'background-position-x': '-'+left+'px'});
 },
 
 // 更新 refresh: function() {
 	この.randSet();
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //ランダムな背景画像 this.$element.find('.verify-img-panel').css({'background': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
  this.$element.find('.verify-sub-block').css({'background-image': 'url(images/'+this.options.imgName[this.img_rand]+')', 'background-size': this.setSize.img_width + ' '+ this.setSize.img_height});
 },
 
 //左の値を取得する getLeft: function(node) {
			var left = $(node).offset().left;
// var nowPos = node.offsetParent;
//
// while(nowPos != null) { 
 // 左 += $(nowPos).offset().left; 
// nowPos = nowPos.offsetParent; 
 // }
  左に戻る;
 }
 };
 
 //Pointsコンストラクタを定義する var Points = function(ele, opt) {
 this.$element = ele,
 this.defaults = {
 	defaultNum : 4, //デフォルトの文字数 checkNum : 3, //検証済みの文字数 vSpace : 5, //間隔 imgName : ['1.jpg', '2.jpg'],
 	画像サイズ:{
	 	幅: '400px',
	 	高さ: '200px'、
	 },
	 バーサイズ:{
	 	幅: '400px'、
	 	高さ: '40px'、
	 },
	 準備完了: 関数(){},
 	成功: function(){},
  エラー: 関数(){}
 },
 this.options = $.extend({}, this.defaults, opt)
 };
 
 //Pointsメソッドを定義するPoints.prototype = {
 	初期化:関数() {
 
			var _this = これ;
 
			//ページをロードする _this.loadDom();
 
 	_this.refresh();
 	_this.options.ready();
 
 	this.$element[0].onselectstart = document.body.ondrag = function(){
				false を返します。
			};
 
		 	//クリックイベントの比較 _this.$element.find('.verify-img-panel canvas').on('click', function(e) {
 
				_this.checkPosArr.push(_this.getMousePos(this, e));
 
				if(_this.num == _this.options.checkNum) {
 
					_this.num = _this.createPoint(_this.getMousePos(this, e));
					setTimeout(関数() {
						var flag = _this.comparePos(_this.fontPos, _this.checkPosArr);
 
						if(flag == false) { //検証に失敗しました _this.options.error();
							_this.$element.find('.verify-bar-area').css({'color': '#d9534f', 'border-color': '#d9534f'});
						 _this.$element.find('.verify-msg').text('検証に失敗しました');
 
							setTimeout(関数() {
								_this.$element.find('.verify-bar-area').css({'color': '#000','border-color': '#ddd'});
						 	_this.refresh();
						 }, 400);
 
						}else { //検証成功 _this.$element.find('.verify-bar-area').css({'color': '#4cae4c', 'border-color': '#5cb85c'});
							_this.$element.find('.verify-msg').text('検証に成功しました');
							_this.$element.find('.verify-refresh').hide();
							_this.$element.find('.verify-img-panel').unbind('click');
							_this.options.success();
						}
					}, 400);
 
				}
 
				if(_this.num < _this.options.checkNum) {
					_this.num = _this.createPoint(_this.getMousePos(this, e));
				}
 
 	});
 
 	 //Refresh_this.$element.find('.verify-refresh').on('click', function() {
  	_this.refresh();
  });
 
 	},
 
 
 
 	//ページをロードする loadDom : function() {
 
 		this.fontPos = []; //選択された座標情報 this.checkPosArr = []; //ユーザーがクリックした座標 this.num = 1; //クリック回数 this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //ランダムな背景画像 var panelHtml = '';
 	var tmpHtml = '';
 
 	this.setSize = Slide.prototype.resetSize(this); //幅と高さをリセット panelHtml += '<div class="verify-img-panel"><div class="verify-refresh" style="z-index:9999"><i class="iconfont icon-refresh"></i></div><canvas width="'+this.setSize.img_width+'" height="'+this.setSize.img_height+'"></canvas></div><div class="verify-bar-area"><span class="verify-msg"></span></div>';
 
 	this.$element.append(panelHtml);
 
 
 	this.htmlDoms = {
 		img_panel: this.$element.find('.verify-img-panel'),
 		bar_area : this.$element.find('.verify-bar-area'),
 		メッセージ: this.$element.find('.verify-msg'),
 	};
 
 		this.htmlDoms.img_panel.css({'width': this.setSize.img_width, 'height': this.setSize.img_height, 'background-size': this.setSize.img_width + ' ' + this.setSize.img_height, 'margin-bottom': this.options.vSpace + 'px'});
 		this.htmlDoms.bar_area.css({'width': this.options.barSize.width, 'height': this.options.barSize.height, 'line-height': this.options.barSize.height});
 
 	},
 
 	//合成画像を描画するdrawImg: function(obj, img) {
 		//キャンバス環境を準備する var canvas = this.$element.find('canvas')[0];
	 	//var canvas=document.getElementById("myCanvas");
	 	var ctx = canvas.getContext("2d");
 
	 	// 画像を描画します ctx.drawImage(img,0,0, parseInt(this.setSize.img_width), parseInt(this.setSize.img_height));
 
	 	// 透かしを描画します var fontSizeArr = ['italic small-caps bold 20px microsoft yahei', 'small-caps normal 25px arial', '34px microsoft yahei'];
	 	var fontstr = '宇宙は広大で無限、月と月のワックスと衰退、星が広がり、夏が来ます、秋の収穫、冬の店、跳躍年が年になり、雲が昇り、雨と露が霜に変わります生inger、海、塩辛い鱗、隠れた羽、飛ぶドラゴン、火の皇帝、鳥の役人、皇帝は最初に衣服を着て、王座をあきらめ、国をあきらめました、Xiaer、そして遺体はゲストを王に戻すように導きました ';
 
	 	var avg = Math.floor(parseInt(this.setSize.img_width)/(parseInt(this.options.defaultNum)+1));
	 	var tmp_index = '';
	 	var color2Num = Math.floor(Math.random() * 5);
 
	 	for(var i = 1; i <= this.options.defaultNum; i++) {
 
	 		fontChars[i-1] = this.getChars(fontStr, fontChars);
 
	 		tmp_index = Math.floor(Math.random()*3);
	 		ctx.font = fontSizeArr[tmp_index];
		 	ctx.fillStyle = _code_color2[color2Num];
 
		 	(Math.floor(Math.random() * 2) == 1)の場合{
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) + tmp_index*20 + 20;
		 	}それ以外 {
		 		var tmp_y = Math.floor(parseInt(this.setSize.img_height)/2) - tmp_index*20;
		 	}
 
		 	ctx.fillText(fontChars[i-1],avg * i, tmp_y);
		 	this.fontPos[i-1] = {'char': fontChars[i-1], 'x': avg * i, 'y': tmp_y};
 
	 	}
 
	 	for(var i = 0; i < (this.options.defaultNum - this.options.checkNum); i++) {
	 		this.shuffle(this.fontPos).pop();
	 	}
 
	 	var msgStr = '';
	 	for(var i = 0; i < this.fontPos.length; i++) {
	 		msgStr += this.fontPos[i].char + ',';
	 	}
 
	 	this.htmlDoms.msg.text('【' + msgStr.substring(0,msgStr.length-1) + '】の順にクリックしてください');
 
	 	this.fontPos を返します。
 	},
 
 	//座標を取得する getMousePos :function(obj, event) {
  var e = イベント || window.event;
  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  var x = e.clientX - ($(obj).offset().left - $(window).scrollLeft());
 		var y = e.clientY - ($(obj).offset().top - $(window).scrollTop());
 
  {'x': x, 'y': y} を返します。
 	},
 
 	//再帰的な重複排除 getChars : function (fontStr, fontChars) {
 
 		var tmp_rand = parseInt(Math.floor(Math.random() * fontStr.length));
 		tmp_rand > 0 の場合
 			tmp_rand = tmp_rand - 1;
 		}
 
 		tmp_char = fontStr.charAt(tmp_rand);
 		if($.inArray(tmp_char, fontChars) == -1) {
 			tmp_char を返します。
 		}それ以外 {
 			Points.prototype.getChars(fontStr, fontChars) を返します。
 		}
 	},
 
		// 配列をシャッフルする shuffle: function(arr) {
			var m = arr.length, i;
			(m) {
				i = (Math.random() * m--) >>> 0;
				[arr[m], arr[i]] = [arr[i], arr[m]]
			}
			arr を返します。
		},
 
 	//座標点を作成する createPoint : function (pos) {
 		this.htmlDoms.img_panel.append('<div class="point-area" style="background-color:#1abd6c;color:#fff;z-index:9999;width:30px;height:30px;text-align:center;line-height:30px;border-radius: 50%;position:absolute;top:'+parseInt(pos.y-10)+'px;left:'+parseInt(pos.x-10)+'px;">'+this.num+'</div>');
 		++this.num を返します。
 	},
 
 	//座標点を比較する comparePos : function (fontPos, checkPosArr) {
 
 		var フラグ = true;
 		for(var i = 0; i < fontPos.length; i++) {
 			if(!(parseInt(checkPosArr[i].x) + 40 > fontPos[i].x && parseInt(checkPosArr[i].x) - 40 < fontPos[i].x && parseInt(checkPosArr[i].y) + 40 > fontPos[i].y && parseInt(checkPosArr[i].y) - 40 < fontPos[i].y)) {
 				フラグ = false;
 				壊す;
 			}
 		}
 
 		フラグを返します。
 	},
 
 	// 更新 refresh: function() {
 	var _this = これ;
 	this.$element.find('.point-area').remove();
 	this.fontPos = [];
 	this.checkPosArr = [];
 	数値 = 1;
 
 	this.img_rand = Math.floor(Math.random() * this.options.imgName.length); //ランダムな背景画像 var img = new Image();
		 img.src = 'images/' + this.options.imgName[this.img_rand];
 
 
		 	// 読み込みが完了し、描画を開始します $(img).on('load', function(e) {
 		this.fontPos = _this.drawImg(_this, this);
 	});
 
 },
 
 };
 
 //プラグイン内のcodeVerifyオブジェクトを使用する $.fn.codeVerify = function(options, callbacks) {
 var code = 新しいコード(this, オプション);
 コード.init();
 };
 
 //プラグイン内のslideVerifyオブジェクトを使用する $.fn.slideVerify = function(options, callbacks) {
 var slide = new Slide(this, options);
 スライドを初期化します。
 };
 
 //プラグインでclickVerifyオブジェクトを使用する $.fn.pointsVerify = function(options, callbacks) {
 var points = new Points(this, options);
 ポイントを初期化します。
 };
 
})(jQuery、ウィンドウ、ドキュメント);

これで、さまざまなタイプの jQuery Web ページ検証コード プラグインのコード例に関するこの記事は終了です。jQuery Web ページ検証コード プラグインの関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ドラッグスライダー画像パズル検証コードプラグインを実装するHTML+jQuery[モバイル端末に適用可能]
  • 静的 HTML 検証コード検証を実装する jQuery プラグイン
  • jQuery Real Person 検証コード プラグインはフォームの自動送信を防止します
  • 確認コードを取得するためにクリックしてから 60 秒以内に再取得を防止する jQuery プラグイン

<<:  JS を使用して要素が配列であるかどうかを判断する例

>>:  雨滴効果を実現する JavaScript キャンバス

推薦する

Vue でスロットを使用する方法についての簡単な説明

定義と使用方法:コンポーネントのテンプレートでスロットタグの定義を使用します。デフォルトの表示値は、...

Vue3でカルーセルコンポーネントをカプセル化する方法

目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...

Vue CLI のモードと環境変数の詳細な説明

序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

Nginx の realip モジュールの使い方の基礎学習

序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

JSはアニメーションのレイアウト変換を実装します

JS でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...

nginxでの共有メモリの使用に関する詳細な説明

nginx プロセス モデルでは、トラフィック統計、トラフィック制御、データ共有などのタスクを完了す...

JavaScriptプロトタイプと例の詳細な説明

目次コンストラクタインスタンスとプロトタイプの関係プロトタイププロパティ属性またはメンバーの検索原則...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

MySQL における主キーが 0 であることと主キーの自己選択制約の関係についての詳しい説明 (詳細)

序文この記事は主にMySQLの主キー0と主キー自己排除制約の関係を紹介し、皆さんの参考と学習のために...

CSS を使用して複数の方法で下揃えを実装するサンプル コード

会社のビジネス要件により、次の図の赤い領域の効果を達成する必要があります。 効果の説明: 1. 赤い...

Vue 3 カスタムディレクティブ開発の概要

指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...