かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

JavaScript

見た目に関するきらびやかな事をやるのはあんまり好きじゃない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>

こんな具合かな？？