一開始
點擊圖片後
按下確定後
來看程式碼
jump for joy.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test2.css" rel="stylesheet">
<title>jump for joy</title>
</head>
<body>
<div id="header">
<h2>Jump for Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$(".guess_box").click(function(){
$(".guess_box p").remove();
var discount=Math.floor((Math.random()*5)+5);
var discount_msg="<p> Your Discount is " + discount + "%</p>";
alert(discount_msg);
$(this).append(discount_msg);
}); //end click
}); //end ready
</script>
</body>
</html>
test2.css
div{
float:left;
height:254px;
text-align:left;
border:solid#000 3px;
}
#header{
width:100%;
border:0px;
height:50px;
}
#main{
background-color:gray;
height:500px;
}
.guess_box{
height 254px;
}
完成範例
沒有留言:
張貼留言