{js} else ifのサンプルコード。

肝は、分岐判断の変数と、style.marginLeftに代入する変数がまったく別だというところ。ここは分けて考えなければ動かない。

<style>
#day100410 #bar { background:#F99; width:30px; height:30px; }

</style>
<div id="day100410">
	<div id="bar"></div>
	<p><input id="btn" type="button" value="実行"></p>
	<p id="counter"></p>
<p id="spd"></p>
</div>
<script type="text/javascript">
var mlValue = 0;
var DirSpeed = 0;
document.getElementById("btn").onclick = cli;


function cli(){
	
  if( mlValue <= 0){
		DirSpeed = 10;
  }else if( 350 < mlValue ){
		DirSpeed = -10;
	}

	mlValue += DirSpeed;
	document.getElementById("bar").style.marginLeft = mlValue + 'px';
	document.getElementById('counter').innerHTML = mlValue;
	document.getElementById('spd').innerHTML = DirSpeed;
	setTimeout('cli()',20);

}

</script>

今回のスクリプトの場合は、fx3.6.3だとちょっと不安定。chrome 5.0.342.9 betaが一番安定してる。次がsafari4.0.5。続いてopera 10.10。fx3.6が一番遅いかなー。まぁアドオンは結構有効になってるけど。アドオン無効化したら早くなるのか？と思って、全部無効化したけどあまりかわらず。上記すべてmac環境です。ie6で試すのが怖い。

こう書いても同じ動きを実現できる。

これを、

  if( mlValue <= 0){
		DirSpeed = 10;
  }else if( 350 < mlValue ){
		DirSpeed = -10;
	}

こうする。

  if( mlValue < 0){
		DirSpeed *= -1;
  }else if( 350 < mlValue ){
		DirSpeed *= -1;
	}

このスクリプトのバグ。

実行ボタンを連打すると、速度が上がって見える。原因は不明。