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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: JS を使用して要素が配列であるかどうかを判断する例
>>: 雨滴効果を実現する JavaScript キャンバス
この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...
目次背景成し遂げるvue-cli2.0での設定方法の補足要約する背景プロジェクトにはローカル構成ファ...
目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...
私は2年間運用保守に携わり、多くのコマンドを使用しました。特定のLinuxコマンドを習得すると、どれ...
目次1. 効果2. メインコード1. 効果機能: インターフェイスから取得したデータを使用してオプシ...
スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...
最近では、モバイルデバイスがますます普及しており、ユーザーがスマートフォンやタブレットを使用して W...
さっそくコードを見てみましょう * { マージン: 0; パディング: 0; } 。容器 { マージ...
1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...
この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...
MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...
目次MySQL 制約操作1. 非ヌル制約2. ユニーク制約3. 主キー制約4. 外部キー制約5. カ...
一般的な CSS コードでは、UI レイアウトや互換性に関して軽微な問題が発生するだけです。しかし、...
イベントの説明onactivate: オブジェクトがアクティブ要素として設定されたときに発生します。...
まずMySQLソースをクエリするdocker 検索 mysql公式ウェブサイトにアクセスしてイメージ...