#概要
- よくつかう関数の自分用メモです。随時追記します。
- jQueryに依存している個所があります。
- 基本、オレオレスクリプトが多数ですので生温かくご覧ください。
##関数の一覧(随時更新)
- デバッグ用コンソール表示
- URL引数を取得
- 時刻表示
- ゼロサプライ2桁固定
- ディープコピー
- ランダム配列を作成
- ボタン処理
- リサイズ時処理
#コード
//デバッグ用コンソール表示
var debug = true;
function _c_(str){
if(debug && console){
console.log(str);
}
}
//URL引数を取得
//メモ:クロスサイトスクリプティング対策なし
var arg;
function getParams(){
arg = new Object;
pair = location.search.substring(1).split('&');
for(var i=0;pair[i];i++) {
var kv = pair[i].split('=');
arg[kv[0]]=kv[1];
}
}
//時刻表示 ※zeroSupが必要です。
//73.234 → 01:13
function timeView(_num){
var num = Math.floor(_num);
var out = '';
var min = Math.floor(num/60);
var sec = Math.floor(num%60);
return zeroSup(min)+':'+zeroSup(sec);
}
//ゼロサプライ(ゼロパディング)2桁固定
// 3 → 03 12 → 12
function zeroSup(_num){
var out = '';
if(_num < 10){
out = '0' + String(_num);
}else{
out = String(_num);
}
return out;
}
//ディープコピー
//メモ:Date型は非対応。その他も問題あるらしいが想定外のデータが入らなければこれで十分
function clone(obj){
return JSON.parse(JSON.stringify(obj));
}
//ランダム配列を作成
//0~(total-1)までの配列からnum個の数値をピックアップした配列を作成する
function randArr(num,total){
var cnt,randnum;
var base = [];
var out = [];
//base配列作成
for(cnt=0;cnt<total;cnt++){
base.push(cnt);
}
while(out.length!=num){
//ランダムに1つピックアップしoutに追加、baseから削除
randnum = Math.floor(Math.random()*base.length);
out.push(base[randnum]);
base.splice(randnum,1);
}
return out;
}
//ボタン処理
//DOM読み込み完了時に初期化する
function btn_click(){
var btnid = $(this).attr('id');
//ボタンのidで処理を分ける
switch(btnid){
case 'btn-A':
//btn-Aの処理
break;
case 'btn-B':
//btn-Bの処理
break;
}
}
//DOM読み込み完了時処理
$(document).ready(function(){
//ボタンの設定初期化(.containerの中にある.btnすべてに適用する)
//clickイベントでスマホのタッチイベントも動作する。
//以前はclickイベントは遅延があるといわれていたが、最近ない気がする(未検証)
$('.container').on('click','.btn', btn_click);
});
//リサイズ時処理
function resized(){
// do something
}
//リサイズ時処理のセット
//モバイル端末で端末の回転時も処理をする場合は、orientationchange を追加する
$(window).on('resize', resized);
##参考
JavaScriptでURLパラメーターを取得し配列に格納しておく
https://qiita.com/tonkatu_tanaka/items/99d167ded9330dbc4019
[JavaScript]色々なディープコピー
https://qiita.com/knhr__/items/d7de463bf9013d5d3dc0
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f
##追加
- 2018.10.11 ランダム配列生成
- 2018.10.24 時刻表示、ゼロサプライ、リサイズ時処理
##今後追加予定
ゼロサプライ- 数値の三桁カンマ
- csv読み込み(Papaparse)
- 時間差計算
- 文字数カウンタ
リサイズ時処理