開発環境
- OS X Yosemite - Apple (OS)
- Safari, Firefox, Google Chrome(Webプラウザ)
- Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
- JavaScript (プログラミング言語)
Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 3(JQuery Events and Functions: Making Things Happen on Your Page)、SHARPEN YOUR PENCIL(No. 1486)を解いてみる。
その他参考書籍
SHARPEN YOUR PENCIL(No. 1486)
HTML5(BBEdit, Emacs)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jump for Joy</title>
<link rel="stylesheet" href="sample1018.css">
</head>
<body>
<header>
<h2>Jump for Joy Sale</h2>
</header>
<section id="main">
<div class="guess_box"><img src="images/jump1.jpg" alt="jump1"></div>
<div class="guess_box"><img src="images/jump2.jpg" alt="jump2"></div>
<div class="guess_box"><img src="images/jump3.jpg" alt="jump3"></div>
<div class="guess_box"><img src="images/jump4.jpg" alt="jump4"></div> </section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('.guess_box').click(function() {
var discount = Math.floor(Math.random() * 6) + 5;
discount_msg = '<p>Your Discount is ' + discount + '%</p>';
$('.guess_box p').remove();
$(this).append(discount_msg);
$(this).unbind('click');
});
});
</script>
</body>
</html>
0 コメント:
コメントを投稿