jsgt_progressbar002.js
4 KB
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
114
//--jslb----------------------------------------------------------------------------
// 最新情報 : 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>')//ダミーの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
}