offsetWidthタイマープロパティの主な用途。
1 <！DOCTYPE HTML >
2 < HTML >
3 < ヘッド>
4 < メタHTTP-当量= "Content-Typeの" コンテンツ= "text / htmlの;のcharset = UTF-8" />
5 < タイトル>进度条</ タイトル>
6 < / ヘッド>
7 < スタイル>
8 #progress {
9 位置：相対。
10 マージン：自動;
11 トップ：200pxの。
12 ディスプレイ：ブロック。
13 幅：200pxの。
14 高さ：20ピクセル;
15 ボーダースタイル：点在。
16 ボーダー幅：薄いです。
17 ボーダーカラー：darkgreen 。
18 }
19 #filldiv {
20 位置：絶対。
21 トップ：0PX 。
22 左：0PX ;
23 幅：0PX 。
24 高さ：20ピクセル;
25 背景：青;
26 }
27 #percent {
28 位置：絶対。
29 トップ：0PX 。
30は 左：200pxの。
31 }
32 </ スタイル>
33 < ボディ>
34 < DIV ID= "進行" >
35 < DIV ID = "filldiv" > </ DIV >
36 < スパンID = "パーセント" > 0 </ スパン>
37 </ DIV >
38 </ ボディ>
39 </ HTML >
40 < スクリプトタイプ= "テキスト/ javascriptの" >
41 // 获取所有需要的元素
42 のvar 進捗= のdocument.getElementById（"進捗状況"）;
43は、 VaRのfilldiv = のdocument.getElementById（" filldiv " ）
44は、 VaRのパーセント= のdocument.getElementById（" パーセント" ）;
45
46である のvar W = progress.clientWidth; //は、プログレスバーの全長取得
47
48 //が開きタイマー
49 のvar タイマ= たsetInterval（関数（）{
50の // 幅増分はfilldiv
51である // filldiv.offsetWidth、各電流幅が取得される
52 filldiv.style.width = filldiv.offsetWidth + 1 + " PX " 、
53である // filldivがランダム背景色を追加し
54である filldiv.style.background = ; GETCOLOR（）
55 // ％は統計的割合
56である percent.innerHTML = （（のparseInt filldiv.offsetWidth / W）* 100）+ "％";
57である // タイマーを停止するために200の幅広filldivとき
58を IF （filldiv.offsetWidth == W）{
59 てclearInterval（タイマー）; // 場合進捗100％は、タイマーオフ、進展が停止したとき。
60 }
61 }、10 ）;
62は、
63である // ランダムな色の16進値取得
64 機能をGETCOLOR（）{
65 VaRのSTRが= " 0123456789ABCDEF " ;
66 VAR カラー= " ＃" ;
67 VARのRAND;
68 // STRを有しています添字0-15
69 //は乱数0-15ゲット
70 // 、STRの添字として乱数によってを
71 // ランダムな文字を取得
72 //は、ランダムな文字列の6列を占めるゲット
73がある ために（VaRのI = 0 ;私は< 6。 、私は++ ）{
74 RAND = getRand（0 、15 ）;
75 カラー+ = str.charAt（RAND）;
76 }
77 リターンカラー;
78 }
79
80 // 取得最小- maxの間のランダムな整数
81 機能getRand（MIN、MAX）{
82 リターンのparseInt（Math.random（）* （最大値- 最小+ 1 ）+ 分）。
83 }
84
85 </ スクリプト>
業績：
** GETCOLOR（）とgetRand（）関数は、共通のJSライブラリに配置することができ、あなたが直接、次の時間を呼び出すことができます。