選択した項目にあわせて数字が徐々に増えて行き、設定値のところで止まるようにしたいです。以下のようなコードを書いていますが動きません。環境は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>
No.1
26
12
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);
4
4
2
1
1
コメント（1件)