かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

見た目関係のこともやってみよう

見た目に関するきらびやかな事をやるのはあんまり好きじゃないokazukiです。
だけど、知らないのは嫌なのでやってみます。
とりあえずは、ありがちなdivで作った四角形を動かす所から。

<html>
<head>
<script type="text/javascript">
function move(targetId) {
	var left = 0;
	var element = document.getElementById(targetId);
	var id = setInterval(function() {
		if (left >= 400) clearInterval(id);
		left += 10;
		element.style.left = left + "px";
	}, 1);
}
</script>
</head>
<body>
<div id="box1" style="position:relative;background: gray; width: 100px; height: 100px">BOX1</div>
<div id="box2" style="position:relative;background: green; width: 100px; height: 100px">BOX2</div>
<hr />
<a href="javascript:move('box1')">BOX1</a>
<a href="javascript:move('box2')">BOX2</a>
</body>
</html>

これでリンクをクリックすると箱が動いて止まる。
結構早いです。
たまりません。

わかりにくいけど動いてます!


知らなかったのは、setIntervalの戻り値があること!
この戻り値がタイマー?の識別子になっていて、これをclearIntervalに渡すことで定周期で動いてたものが止まる。
400pxまで箱が移動したらとめるようにしている。

OOPチックに書くと…?

<html>
<head>
<script type="text/javascript">
function Box(id, speed) {
	this.id = id;
	this.element = document.getElementById(id);
	this.left = 0;
	this.speed = speed;
}
Box.prototype.move = function() {
	this.left += this.speed;
	this.element.style.left = this.left + "px";
}
Box.prototype.start = function() {
	var self = this;
	var timerId = setInterval(function() {
		self.move();
		if (self.left >= 400) {
			clearInterval(timerId);
		}
	}, 1);
}
</script>
</head>
<body>
<div id="box1" style="position:relative;background: gray; width: 100px; height: 100px">BOX1</div>
<div id="box2" style="position:relative;background: green; width: 100px; height: 100px">BOX2</div>
<hr />
<a href="javascript:new Box('box1', 1).start()">BOX1</a>
<a href="javascript:new Box('box2', 10).start()">BOX2</a>
</body>
</html>

こんな具合かな??