HTMLのフォーム画面でドロップダウンの選択項目にあわせてフィールドの値を変化させる方法を教えてください。

選択した項目にあわせて数字が徐々に増えて行き、設定値のところで止まるようにしたいです。以下のようなコードを書いていますが動きません。環境はWinXP Safari ターゲットブラウザはSafari, iPhone, iPadです。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
<script type="text/javascript">
function changePayPrice(Obj){var index_nub = Obj.selectedIndex; switch (index_nub){case 0: Num = 2500; break; case 1: Num = 15000; break; case 2: Num = 30000; break; case 3: Num = 300000; break;}for(var x = 0; x <= Num ; x++) { window.setTimeout("document.getElementById('" + String(payPrice) + "').value = " + x + ";" , 100);}}</script>
</head>
<body>
<form>
<input value="0" type="text" id="payPrice" onChange="updateGraph03();updateGraph02();"/>
<select id="contractorType" name="contractor" onChange="changePayPrice(this);">
<option label="月払い" value="0" selected>月</option>
<option label="半年払い" value="1">半年</option>
<option label="年払い" value="2">年</option>
<option label="一括払い" value="3">一括</option>
</select>
</form>
</body>
</html>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/06/20 02:29:10
  • 終了:2011/06/20 06:30:40

ベストアンサー

id:rikuba No.1

rikuba回答回数26ベストアンサー獲得回数122011/06/20 03:38:21

ポイント200pt

次のようにsetTimeoutの第一引数を直せば動くと思いますが、そのままでは非常に効率が悪く、環境によっては途中で止まったりすると思います。

window.setTimeout("document.getElementById('payPrice').value = " + x + ";" , 100);

forループ部分を取り除き、以下のようにsetTimeoutでループしてはいかがですか。

非同期のループなのでアニメーション中に操作不能に陥ることもなく、指定した時間内に必ずアニメーションを終了させることができます。

  var input = document.getElementById('payPrice');
  var animationTime = 250;  // アニメーションにかける総時間
  var interval = 25;        // 書き換える間隔
  // この例では最大 25 / 250 = 10 回の書き換えが起こる
  var startTime = new Date().getTime();
  setTimeout(function () {
    var time = new Date().getTime() - startTime;
    if (time > animationTime) time = animationTime;
    // アニメーションの総時間における経過時間の割合から値を算出する
    input.value = Math.floor(Num * (time / animationTime));
    if (time < animationTime) setTimeout(arguments.callee, interval);
  }, interval);

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません