最近パスワードを設定することが多いが、
いちいち考えたりツールを探すのが面倒なので、自分で作った。
構造
/data/
alphabet.ini アルファベット文字列格納
number.ini 数字文字列格納
symbol.ini 記号文字列格納
/js/
jquery-1.8.2.min.js jQuery
index.html 表示用
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="config"> <h3>桁数</h3> <div><input type="text" id="digit" value="8" /><span>桁</span></div> <h3>パターン</h3> <div> <ul> <li><label for="pattern_1"><input type="text" id="pattern_1" readonly value="●" /><span>英字</span></label></li> <li><label for="pattern_2"><input type="text" id="pattern_2" readonly value="●" /><span>数字</span></label></li> <li><label for="pattern_3"><input type="text" id="pattern_3" readonly value="●" /><span>記号</span></label></li> </ul> </div> <p><a href="#">出力</a></p> </div> <div> <input type="text" id="output" /> </div> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | $( document ).ready( function() { // データ読み込み var alphabet; var number; var symbol; var data = []; $.ajax({ type: "GET", url: "data/alphabet.ini", success: function( d ) { alphabet = d.split( ',' ); } }); $.ajax({ type: "GET", url: "data/number.ini", success: function( d ) { number = d.split( ',' ); } }); $.ajax({ type: "GET", url: "data/symbol.ini", success: function( d ) { symbol = d.split( ',' ); } }); $( 'a' ).click(function () { // エラー処理 var flg = true; if ( !$( '#digit' ).val() || !isFinite( $( '#digit' ).val() ) ) { $( '#digit' ).css( 'background-color', '#fcf' ); flg = false; } else { $( '#digit' ).css( 'background-color', '#fff' ); } if ( !$( '#pattern_1' ).val() && !$( '#pattern_2' ).val() && !$( '#pattern_3' ).val() ) { $( '#pattern_1' ).css( 'background-color', '#fcf' ); $( '#pattern_2' ).css( 'background-color', '#fcf' ); $( '#pattern_3' ).css( 'background-color', '#fcf' ); flg = false; } else { $( '#pattern_1' ).css( 'background-color', '#fff' ); $( '#pattern_2' ).css( 'background-color', '#fff' ); $( '#pattern_3' ).css( 'background-color', '#fff' ); } if ( !flg ) return false; // 初期化 data = []; // パターンによってデータを作成 if ( $( '#pattern_1' ).val() ) { data = data.concat( alphabet ); } if ( $( '#pattern_2' ).val() ) { data = data.concat( number ); } if ( $( '#pattern_3' ).val() ) { data = data.concat( symbol ); } // パスワードを生成 var pass = ''; for ( var i = 0; i < Number( $( '#digit' ).val() ); i++ ) { var r = Math.floor( Math.random() * data.length ); pass += data[r]; } // 出力 $( '#output' ).val( pass ); }); // チェックボックス作成 $( '#pattern_1, #pattern_2, #pattern_3' ).toggle( function () { $( this ).val( '' ); }, function () { $( this ).val( '●' ); } ); // 結果選択 $( '#output' ).click(function () { $( this ).select(); }); } ); |
