JavaScript++かも日記

//--jsGadget-------------------------------------------------------------------------- // 最新情報 : http://jsgt.org/mt/01/ // Public Domain 著作権表示義務無し。商用利用、改造、自由。連絡不要。 //// // jsgt_ProgressBar プログレスバー オブジェクト // // @author Toshiro Takahashi // @support http://jsgt.org/mt/archives/01/000743.html // @version 0.02 // @license Public Domain 著作権表示義務無し。商用利用、改造、自由。連絡不要。 // @sample oj = new jsgt_ProgressBar() //DIVを自動生成する場合 // @sample oj = new jsgt_ProgressBar('nloading') //既存のDIV名で指定する場合 // @param id プログレス用DIVのID名(省略時は"_progress"+(new Date()).getTime()) // @method oj.prog_start() プログレススタート // @method oj.prog_stop() プログレススタート // @property oj.div バーを出力するdivオブジェクト // @property oj.div.style スタイルオブジェクト(CSSを利用できます) // @property oj.prog_bar バーのキャラクタ(デフォルトは'|') // @property oj.prog_interval プログレスインターバル(デフォルトは50 1/1000秒単位) // @property oj.prog_count プログレスバーカウンター // @property oj.prog_count_max プログレスバーカウンターMax(デフォルトは18) // @return プログレスバーオブジェクトのインスタンス // function jsgt_ProgressBar(id) { this.div = setProgressDIV(id) this.prog_start = prog_start this.prog_stop = prog_stop var oj = this.div function setProgressDIV(id) { // プログレスバーを出力するdiv if(!id){ id = "_progress"+(new Date()).getTime();//idを生成; if(document.getElementsByTagName('BODY').length==0) document.write('')//ダミーのbodyタグ var creprgDIV = document.createElement("DIV") ; this.div = document.body.appendChild(creprgDIV) ; this.div.setAttribute("id",id) ; this.div.style.position = "relative"; this.div.style.top = "0px"; this.div.style.left = "0px"; this.div.style.width = "0px"; this.div.style.height = "0px"; } else { this.div = document.getElementById(id) } // プログレスバー用DIVのデフォルト値(インスタンスで上書き変更できます) this.div.style.color = 'red' ; //バーの色 this.div.style.margin = '0px' ; //バーのマージン this.div.style.padding = '4px'; //バーのパディング // プログレスバーのデフォルト値 this.div.prog_bar= '|'; //バーのキャラクタ this.div.prog_interval= 50; //プログレス インターバル 1/1000秒単位 this.div.prog_count =0; //プログレスカウンター初期値 this.div.prog_count_max =18; //プログレスバー カウンターMax this.div.prog_array= []; //バーのタイマーIDを格納する配列 return this.div } //プログレス スタート function prog_start() { //サイズを与えることで表示する this.div.style.height ="12px"; this.div.style.width ="auto"; this.div.prog_array.unshift( setInterval( function(){ doProguress() } , this.div.prog_interval ) ) } //プログレス ストップ function prog_stop() { clearInterval(this.div.prog_array[0]) //停止したタイマーを削除 this.div.prog_array.shift() //消去 this.div.style.width ="0px"; this.div.style.height ="0px"; this.div.innerHTML = '' ; } //プログレスバー作動 function doProguress() { //window.status=oj.id //チェック if(oj.prog_count >= oj.prog_count_max|| oj.prog_count <= 0 ){ oj.innerHTML = '' ; //初期化 oj.prog_count =0; } oj.innerHTML += oj.prog_bar ; oj.prog_count++ ; } return this }