人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: caji
●カテゴリ:コンピュータ
✍キーワード:CASE HTML iPad iPhone Safari
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rikuba
●200ポイント ベストアンサー

次のように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);
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ