采用2D的方式模拟电影院购票的系统。选择的座位一次的追加到代付款的模块当中，最后确认信息后进行购票。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 540px;
height: 760px;
}
.weizi{
float: left;
padding-top: 24px;
padding-bottom: 42px;
border-bottom: dashed;
}
.first span
{
display: inline-block;
width: 38px;
height: 38px;
font-size: 13px;
background-color: #B9DEA0;
text-align: center;
color: #fff;
cursor: pointer;
border-radius: 5px;
margin-top: 24px;
}
.fourth span
{
display: inline-block;
width: 38px;
height: 38px;
color: #fff;
font-size: 13px;
background-color: #B9DEA0;
text-align: center;
cursor: pointer;
border-radius: 5px;
margin-top: 24px;
}
.second span{
display: inline-block;
width: 38px;
height: 38px;
color: #fff;
font-size: 13px;
background-color: #B9DEA0;
text-align: center;
cursor: pointer;
border-radius: 5px;
margin-top: 24px;
}
.third span{
display: inline-block;
width: 38px;
height: 38px;
color: #fff;
font-size: 13px;
background-color: #B9DEA0;
text-align: center;
cursor: pointer;
border-radius: 5px;
margin-top: 24px;
}
.show{
font-size: x-large;
float: right;
background-color: #f0f0f0;
color: #666;
border-radius: 5px;
height: 320px;
width: 36px;
text-align: center;
line-height: 146px;
}
.booking-details {
float: left;
position: relative;
width: 200px;
height: 450px;
}
.booking-details h3 {
margin: 5px 5px 0 0;
font-size: 16px;
}
.booking-details p {
line-height: 26px;
font-size: 16px;
color: #999
}
.booking-details p span {
color: #666
}
</style>
</head>
<body>
<div class="box">
<div class="weizi">
<div class="first">
<span>1-1</span>
<span>1-2</span>
<span>1-3</span>
<span>1-4</span>
<span>1-5</span>
<span>1-6</span>
<span>1-7</span>
<span>1-8</span>
<span>1-9</span>
<span>1-10</span>
</div>
<div class="second">
<span>2-1</span>
<span>2-2</span>
<span>2-3</span>
<span>2-4</span>
<span>2-5</span>
<span>2-6</span>
<span>2-7</span>
<span>2-8</span>
</div>
<div class="third">
<span>3-1</span>
<span>3-2</span>
<span>3-3</span>
<span>3-4</span>
<span>3-5</span>
<span>3-6</span>
<span>3-7</span>
<span>3-8</span>
</div>
<div class="fourth">
<span>4-1</span>
<span>4-2</span>
<span>4-3</span>
<span>4-4</span>
<span>4-5</span>
<span>4-6</span>
<span>4-7</span>
<span>4-8</span>
<span>4-9</span>
<span>4-10</span>
</div>
</div>
<div class="show">屏幕</div>
<div class="booking-details">
<p id="zuowei">座位：</p>
<ul id="selected-seats"></ul>
<p>票数：<span id="counter">0</span></p>
<p>单价：<span id="singleprice"></span></p>
<p>总计：<b>￥<span id="total">0</span></b></p>
<button class="checkout-button" onclick='return confirm("确认购买吗？")'>确定购买</button>
<div id="legend"></div>
</div>
</div>
<script src="Jquery/jquery.js"></script>
<script>
var price=5;
$(document).ready(function(){
$("#singleprice").text(price);
$("span").toggle(function(){
$(this).css('backgroundColor','gray');
$('<li>'+this.innerText+'</li>').appendTo("#zuowei");
var ccon=parseInt($("#counter").text());
$("#counter").text((ccon + 1).toString());
var tprice=parseInt($("#total").text());
$("#total").text((tprice+ price).toString());
},function(){
$(this).css('backgroundColor','#B9DEA0');
$("li:contains('"+$(this).text()+"')").remove();
var ccon=parseInt($("#counter").text());
$("#counter").text((ccon -1).toString());
var tprice=parseInt($("#total").text());
$("#total").text((tprice-price).toString());
});
});
</script>
</body>
</html>
结果展示