プログレスバー（進行状況）の実現について

[新着] Webテンプレートを仮オープンしました

0   名前： ちゃぼ ： 2006/08/22（火） 01:56  ID:BcLf8jT2
こんにちは、はじめて質問させて頂く"ちゃぼ"と申します。

今日、HTML上でプログレスバー（進行状況）を表現したいといろいろ
と探していたところ、下記のサイトの「パスタタイマー」にヒントを得ました。
http://www.geocities.co.jp/EpicureanTable/1024/etc/pastatimer.html

自分で少し改変してみましたが、なかなかうまくいきません。
もしよろしかったら、皆様にご教授願いたいと思い、書き込ませてもらいました。

■実現したい内容は以下のとおりです。
・ページを開いた時点で、設定した時間でプログレスバーが動くことです。
　（GETやPOSTで時間値を取得する感じです）
・表示するのは「プログレスバー」と「秒タイマー」だけです。
　（現在表示しているスタートボタンは無くす）

今現在の状況は、以下のアドレスです。
#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
http://onimegumi.net/test/timer.html
#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
（時間を書き換えて、スタートを押すと動くのですが・・・）

どうぞよろしくお願い申し上げます。
1   名前： m035 ◆Wpzr1YKOiq ： 2006/08/22（火） 01:56  ［URL］  ID:4KIacXXc
マルチ。
http://www.usagi-js.com/bbs/jsforum.cgi?mode=allread&no=8548&page=0
2   名前： ちゃぼ ： 2006/08/22（火） 01:56  ID:qaRBupCe
マルチポストはすべて削除いたしました。ご迷惑かけて申し訳ありませんでした。

タイマーの改変には一言連絡が必要ですが、メールを出せどもコンタクトが取れないでいます。
HPも数年前から更新がなく、困っているところです。

3   名前： Pid ： 2006/08/22（火） 01:56  ID:TnlTHoeS
>>2
この場合，削除は一番やってはいけない行為です。「マルチポスト クロスポスト」あたりで検索してみて，しかるべき処置をとって下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>プログレスバー</title>

<script type="text/javascript">

if (document.implementation
    && (window.addEventListener || window.attachEvent)
    && Function.prototype
    && Function.prototype.call)

var ProgressBar = (function () {
////////////////////////////////////////////////////////////////////////


function Timer (msec) {
    this.timeOut       = msec || 1000;
    this.timerID       = null;
    this.timerListener = null;
}


Timer.prototype.addTimerListener = function (listener) {
    this.timerListener = listener;
};


Timer.prototype.start = function () {
    this.timerID = function (thisObj, callback) {
                       return setTimeout (
                           function() {
                               thisObj.timerListener ();
                               callback.call (thisObj);
                           },
                           thisObj.timeOut
                       );
                   } (this, arguments.callee);
};


Timer.prototype.stop = function () {
    clearTimeout (this.timerID);
};


//______________________________________________________________________


function ComputedStyle () {
    this.width      = '0px';
    this.height     = '1em';
    this.background = '#999';
    this.border     = '1px solid #222';
}


ComputedStyle.prototype.expand = function (pixelWidth) {
    this.width = (parseInt (this.width) + pixelWidth) + 'px';
};


//______________________________________________________________________


function ProgressBar () {
    Timer.apply (this, arguments);
    
    this.targetNode = document.createElement ('p');
    ComputedStyle.call (this.targetNode.style);
};


ProgressBar.prototype = new Timer;
ProgressBar.prototype.constructor = ProgressBar;


ProgressBar.prototype.increase = function () {
    ComputedStyle.prototype.expand.apply (this.targetNode.style, arguments);
};


ProgressBar.prototype.addEventListener = function (type, listener, useCapture) {
    this.targetNode./*@cc_on @if (@_jscript) attachEvent ('on' + @else @*/
                    addEventListener (/*@end @*/ type, listener, useCapture);
};


//______________________________________________________________________


ProgressBar.create = function () {
    var pb = new this (60);
    
    document.body.appendChild (pb.targetNode);
    
    pb.addTimerListener (function () {
        this.increase (2);
    } );
    
    pb.addEventListener ('mouseup', function (e) {
        pb.stop ();
    }, false);
    
    pb.start ();
};


return ProgressBar;

////////////////////////////////////////////////////////////////////////
} )();

</script>

<p style="cursor: pointer; " onclick="ProgressBar.create (); ">プログレスバー追加</p>
4   名前： かふぇおれ ： 2006/08/22（火） 01:56  ID:Ji0blfRq
>>0　
＞ページを開いた時点で、設定した時間でプログレスバーが動く
関数を body onload= で読んでみたらどうでしょう。

＞時間を書き換えて、スタートを押すと動くのですが・・・
そのままスタートを押した場合は、starttimer() から始まってしまいますので、
settimer() が呼ばれないから totaltime が宣言されないままになってしまいます。
<BODY onload="settimer(document.timer.sec.value);"> とすれば動くと思います。

# >>3 のscriptは私の環境では動きませんでした。残念。
5   名前： Pid ： 2006/08/22（火） 01:56  ID:qyBiqpAB
>>4
WinIE5/MacIE5，NN4 以下は ECMA 262-3 を部分的にしかサポートしていない（さすがに古い）ので，最初に弾いてあります。

Function.prototype.apply，Function.prototype.call，addEeventListener を定義すれば動きます。自分で組まずとも，WinIE5/MacIE5 に足りないオブジェクトを拡張するライブラリはいくつか配布されていますので，事前に読み込んでおいて下さいませ。
6   名前： かふぇおれ ： 2006/08/22（火） 01:56  ID:Ji0blfRq
>>5　部分的にしかサポートしていない（さすがに古い）ので

がぁ〜〜ん……。ハッキリと言われてしまった。
で、すみません。「Javascript オブジェクト拡張 mac 」で検索してみたのですが、
良く理解できませんでした。

参考頁等を教えて頂けませんでしょうか。
7   名前： Pid ： 2006/08/22（火） 01:56  ID:7ZLUWR5F
if ('undefined' == typeof Function.prototype.apply)
    Function.prototype.apply = function (thisObj, argArray) {
        var result;
        var tmpObj = (null == thisObj) ? window : thisObj;
        var tmpArg = Array.prototype.slice (arguments, 0).toString ();
        
        tmpObj._$method = this;
        result = eval ('tmpObj._$method (' + tmpArg + ')');
        delete tmpObj._$method;
        
        return result;
    }


if ('undefined' == typeof Function.prototype.call)
    Function.prototype.call = function (thisObj) {
        return Function.prototype.apply (thisObj, Array.prototype.slice (arguments, 1));

    }


//______________________________________________________________________

ProgressBar.prototype.addEventListener = function (type, listener, useCapture) {
    try {
        // ........
    } catch (e) {
        this.targetNode['on' + type] = listener;  // 手抜き
    }
};


とか。
8   名前： 園葉 ： 2006/08/22（火） 01:56  ID:OfLW8a3R
MacIE5ユーザーです。
Pidさんが>>7で示されたコードはMacIE5ではうまく動作しません。
Array.prototype.sliceの箇所がMacIE5で問題となるようです。
下記サイトで引用されているprototype.js 1.3.1のFunction.prototype.applyなら動作しました。

prototype.jsを読んでみる (1)：
http://dev.ariel-networks.com/Members/anaka/prototype-js30928aad3093307f308b

なお、引数として2番目の引数内の配列を用いている箇所を2番目〜最後の引数に変更すると
Function.prototype.callとなります。
9   名前： Pid ： 2006/08/22（火） 01:56  ID:qX78Rjxr
亀レスで恐縮ですが，園葉さん検証ありがとうございます m(_ _)m。

なるほど，MacIE がそうだったんですね……。とりあえず，Array.prototype.slice も用意してみました。

if ('undefined' == typeof Array.prototype.push)
    Array.prototype.push = (function () {
        return function () {
            var i = 0;
            var I = arguments.length;
            
            while (i < I)
                this[this.length] = arguments[i++];
            
            return this.length;
        };
    } )();

if ('undefined' == typeof Array.prototype.slice)
    Array.prototype.slice = (function () {
        return function (start, end) {
            var result = [ ];
            
            var i = toPositive (start, this.length);
            var I = ('undefined' == typeof end) ? this.length : toPositive (end, this.length);
            
            while (i < I)
                result.push (this[i++]);
            
            return result;
        };
        
        function toPositive (n, max) {
            n = Number (parseInt (n));
            
            return (n < 0) ? Math.max (n + max, 0) : Math.min (n, max);
        }
    } )();


ちなみに，>>7 で私が使っている delete 演算子は JavaScript 1.2 からなので，WinIE 5.0 以下では不可です。そのため，prototype.js では null 代入を行っているようですね（ガベージコレクタの対象にはなるのかな……まあ，無視できるレベルだと思いますが）。

ライブラリ指向への道はなかなかに険しい……。
一覧へ戻る