開発環境
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- jQuery (Library)
- Safari(Web browser)
Javascript for Kids (Nick Morgan 著、Angus Croll 寄稿、Miran Lipovaca イラスト、No Starch Press)のPart 2(Advanced JavaScript)、Chapter 10(Interactive Programming)、PROGRAMMING CHALLENGES #3: (Cancel an Animation with a Click)、(No. 2714)を取り組んでみる。
PROGRAMMING CHALLENGES #3: (Cancel an Animation with a Click)
コード(Emacs)
<!doctype html>
<html>
<head>
</head>
<body>
<div style="width:250px; height:250px;">
<h1 id="heading">Hello world!</h1>
</div>
<button id="run0">run</button>
<button id="stop0">stop</button>
<script src="jquery.js"></script>
<script src="sample3.js"></script>
</body>
</html>
/*jslint node : true, continue : true,
devel : true, indent : 2, maxerr : 50,
newcap : true, nomen : true, plusplus : true,
regexp : true, sloppy : true, vars : false,
white : true
*/
/*global $ */
var $heading = $('#heading'),
timer,
offset_left,
offset_right,
offset_top,
offset_bottom,
cur_left,
cur_top,
direction = 'right',
pixels = 5,
t = 20;
offset_left = $heading.offset().left;
offset_right = offset_left + 200;
offset_top = $heading.offset().top;
offset_bottom = offset_top + 200;
cur_left = offset_left;
cur_top = offset_top;
$('#run0').click(function () {
clearInterval(timer);
timer = setInterval(function () {
if (direction === 'right') {
cur_left += pixels;
$heading.offset({left: cur_left});
if (cur_left === offset_right) {
direction = 'bottom';
}
} else if (direction === 'bottom') {
cur_top += pixels;
$heading.offset({top: cur_top});
if (cur_top === offset_bottom) {
direction = 'left';
}
} else if (direction === 'left') {
cur_left -= pixels;
$heading.offset({left: cur_left});
if (cur_left === offset_left) {
direction = 'top';
}
} else if (direction === 'top') {
cur_top -= pixels;
$heading.offset({top: cur_top});
if (cur_top === offset_top) {
direction = 'right';
}
}
}, t);
});
$('#stop0').click(function () {
clearInterval(timer);
});
0 コメント:
コメントを投稿