<?php
session_start();
//unset($_SESSION['username']);
if(isset($_SESSION['username']))
{$username='<a href="profile.php">'.$_SESSION['username'].'</a>';}else
{$username='<a href="../loading/cloading.php">登录</a>
<em>|</em>
<a href="../loading/signUp.php">注册</a>';}
?>
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>天津最新上映电影、电影票网上预订、在线购票</title>
<link type="text/css" rel="stylesheet" href="../Css/common1.css">
<meta name="keywords" content="天津影讯,电影,电影排期,电影票,电影票预订,票价,在线选座购票,网上购票">
<meta name="description" content="提供天津各大影院最新影讯、影片介绍、电影院影片排期信息,并提供电影票网上预订、在线选座购票、服务">
<style type="text/css">
.demo {
width: 700px;
margin: 40px auto 0 auto;
min-height: 450px;
}
@media screen and (max-width: 360px) {
.demo {
width: 340px
}
}
.front {
width: 300px;
margin: 5px 32px 45px 32px;
background-color: #f0f0f0;
color: #666;
text-align: center;
padding: 3px;
border-radius: 5px;
}
.booking-details {
float: right;
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
}
div.seatCharts-cell {
color: #182C4E;
height: 25px;
width: 25px;
line-height: 25px;
margin: 3px;
float: left;
text-align: center;
outline: none;
font-size: 13px;
}
div.seatCharts-seat {
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.seatCharts-row {
height: 35px;
}
div.seatCharts-seat.available {
background-color: #B9DEA0;
}
div.seatCharts-seat.focused {
background-color: #76B474;
border: none;
}
div.seatCharts-seat.selected {
background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
background-color: #472B34;
cursor: not-allowed;
}
div.seatCharts-container {
border-right: 1px dotted #adadad;
width: 400px;
padding: 20px;
float: left;
}
div.seatCharts-legend {
padding-left: 0px;
position: absolute;
bottom: 16px;
}
ul.seatCharts-legendList {
padding-left: 0px;
}
.seatCharts-legendItem {
float: left;
width: 90px;
margin-top: 10px;
line-height: 2;
}
span.seatCharts-legendDescription {
margin-left: 5px;
line-height: 30px;
}
.checkout-button {
display: block;
width: 80px;
height: 24px;
line-height: 20px;
margin: 10px auto;
border: 1px solid #999;
font-size: 14px;
cursor: pointer
}
#selected-seats {
max-height: 150px;
overflow-y: auto;
overflow-x: none;
width: 200px;
}
#selected-seats li {
float: left;
width: 72px;
height: 26px;
line-height: 26px;
border: 1px solid #d3d3d3;
background: #f7f7f7;
margin: 6px;
font-size: 14px;
font-weight: bold;
text-align: center
}
</style>
</head>
<body>
<div id=login>
<div class="section_r" style="">
<span class="user"></span>
<?php
echo $username;
?>
</div>
</div>
<div id="container">
<div id="header">
<img src="../image/logo.jpg" width="100" height="100">
<ul id=nav>
<li>
<a href="index.php">首页</a>
</li>
<li>
<a href="hotMovie.php">影片</a>
</li>
<li>
<a href="filmReview.php">影评</a>
</li>
<li>
<a href="orderTicket.php ">快速购票</a>
</li>
</ul>
</div>
<div id="poster">
<img src="../image/poster.jpg" alt="开启不死模式" width="100%">
</div>
<div style="height:800px;" id="main"> <div id="main">
<div class="demo">
<div id="seat-map">
<div class="front">屏幕</div>
</div>
<div class="booking-details">
<p>影片:<span>美国队长3</span></p>
<p>时间:<span>6月4日 21:00</span></p>
<p>座位:</p>
<ul id="selected-seats"></ul>
<p>票数:<span id="counter">0</span></p>
<p>总计:<b>¥<span id="total">0</span></b></p>
<form name="ticket" method="post" action="ticket.php">
<input id="moviename" type="hidden" name="moviename" value="美国队长3">
<input id="movieprice"type="hidden" name="movieprice" value="30">
<input id="ticketnum"type="hidden" name="ticketnum" value="">
<input id="zonge" type="hidden" name="total" value="">
<input id="time" type="hidden" name="time" value="June 4th">
<input id="seat"type="hidden" name="seat" value="">
<button class="checkout-button">确认购买</button>
</form>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
</div>
<br/>
</div>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.seat-charts.min.js"></script>
<script type="text/javascript">var price = 30; //票价
$(document).ready(function() { //将函数绑定到文档的就绪事件(当文档完成加载时)
//定义三个变量来存储数据
var $cart = $('#selected-seats'), //座位区 id为selected-seats的元素
$counter = $('#counter'), //票数
$total = $('#total'); //总计金额
//$("#ticketnum")=$counter;
var sc = $('#seat-map').seatCharts({
map: [ //座位结构图 下划线 "_" 代表过道
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aa__aa__aa'
],
naming : {//设置行列等信息
top : false,//不显示顶部横坐标(行)
getLabel : function (character, row, column) {//获取
return column;
}
},
legend : { //定义图例
node : $('#legend'),
items : [
[ 'a', 'available', '可选座' ],
[ 'a', 'unavailable', '已售出']
]
},
click: function () { //点击事件
if (this.status() == 'available') { //可选座
$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')//规定要插入的内容(可包含 HTML 标签)。
.attr('id', 'cart-item-'+this.settings.id)//设置被选元素的属性和值。。
.data('seatId', this.settings.id)//向被选元素附加数据。
.appendTo($cart);//规定把内容追加到$cart上。 $counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //已选中
//更新数量
$counter.text(sc.find('selected').length-1);
//更新总计
$total.text(recalculateTotal(sc)-price);
//删除已预订座位
$('#cart-item-'+this.settings.id).remove();
//可选座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}
});
//已售出的座位
sc.get([ '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');});
$('#ticketnum').attr(value,ticketnum(sc));
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
function ticketnum(sc) {
var counter = 0;
sc.find('selected').each(function () {
counter += counter;
});
return counter;
}
function seat(sc) {
var seats = 0;
sc.find('selected').each(function () {
seats = seats+$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')//规定要插入的内容(可包含 HTML 标签)。
.attr('id', 'cart-item-'+this.settings.id)//设置被选元素的属性和值。。
.data('seatId', this.settings.id)//向被选元素附加数据。;
});
return seats;
}
function button1(){
document.getElementById('ticketnum')="ticketnum(sc)";
//document.getElementById("total");
//document.getElementById("seat"); }
</script>
</div>
<div id="process"></div>
<div id="footer">
<p>天津</p>
</div>
</div>
</body>
</html>
session_start();
//unset($_SESSION['username']);
if(isset($_SESSION['username']))
{$username='<a href="profile.php">'.$_SESSION['username'].'</a>';}else
{$username='<a href="../loading/cloading.php">登录</a>
<em>|</em>
<a href="../loading/signUp.php">注册</a>';}
?>
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>天津最新上映电影、电影票网上预订、在线购票</title>
<link type="text/css" rel="stylesheet" href="../Css/common1.css">
<meta name="keywords" content="天津影讯,电影,电影排期,电影票,电影票预订,票价,在线选座购票,网上购票">
<meta name="description" content="提供天津各大影院最新影讯、影片介绍、电影院影片排期信息,并提供电影票网上预订、在线选座购票、服务">
<style type="text/css">
.demo {
width: 700px;
margin: 40px auto 0 auto;
min-height: 450px;
}
@media screen and (max-width: 360px) {
.demo {
width: 340px
}
}
.front {
width: 300px;
margin: 5px 32px 45px 32px;
background-color: #f0f0f0;
color: #666;
text-align: center;
padding: 3px;
border-radius: 5px;
}
.booking-details {
float: right;
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
}
div.seatCharts-cell {
color: #182C4E;
height: 25px;
width: 25px;
line-height: 25px;
margin: 3px;
float: left;
text-align: center;
outline: none;
font-size: 13px;
}
div.seatCharts-seat {
color: #fff;
cursor: pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.seatCharts-row {
height: 35px;
}
div.seatCharts-seat.available {
background-color: #B9DEA0;
}
div.seatCharts-seat.focused {
background-color: #76B474;
border: none;
}
div.seatCharts-seat.selected {
background-color: #E6CAC4;
}
div.seatCharts-seat.unavailable {
background-color: #472B34;
cursor: not-allowed;
}
div.seatCharts-container {
border-right: 1px dotted #adadad;
width: 400px;
padding: 20px;
float: left;
}
div.seatCharts-legend {
padding-left: 0px;
position: absolute;
bottom: 16px;
}
ul.seatCharts-legendList {
padding-left: 0px;
}
.seatCharts-legendItem {
float: left;
width: 90px;
margin-top: 10px;
line-height: 2;
}
span.seatCharts-legendDescription {
margin-left: 5px;
line-height: 30px;
}
.checkout-button {
display: block;
width: 80px;
height: 24px;
line-height: 20px;
margin: 10px auto;
border: 1px solid #999;
font-size: 14px;
cursor: pointer
}
#selected-seats {
max-height: 150px;
overflow-y: auto;
overflow-x: none;
width: 200px;
}
#selected-seats li {
float: left;
width: 72px;
height: 26px;
line-height: 26px;
border: 1px solid #d3d3d3;
background: #f7f7f7;
margin: 6px;
font-size: 14px;
font-weight: bold;
text-align: center
}
</style>
</head>
<body>
<div id=login>
<div class="section_r" style="">
<span class="user"></span>
<?php
echo $username;
?>
</div>
</div>
<div id="container">
<div id="header">
<img src="../image/logo.jpg" width="100" height="100">
<ul id=nav>
<li>
<a href="index.php">首页</a>
</li>
<li>
<a href="hotMovie.php">影片</a>
</li>
<li>
<a href="filmReview.php">影评</a>
</li>
<li>
<a href="orderTicket.php ">快速购票</a>
</li>
</ul>
</div>
<div id="poster">
<img src="../image/poster.jpg" alt="开启不死模式" width="100%">
</div>
<div style="height:800px;" id="main"> <div id="main">
<div class="demo">
<div id="seat-map">
<div class="front">屏幕</div>
</div>
<div class="booking-details">
<p>影片:<span>美国队长3</span></p>
<p>时间:<span>6月4日 21:00</span></p>
<p>座位:</p>
<ul id="selected-seats"></ul>
<p>票数:<span id="counter">0</span></p>
<p>总计:<b>¥<span id="total">0</span></b></p>
<form name="ticket" method="post" action="ticket.php">
<input id="moviename" type="hidden" name="moviename" value="美国队长3">
<input id="movieprice"type="hidden" name="movieprice" value="30">
<input id="ticketnum"type="hidden" name="ticketnum" value="">
<input id="zonge" type="hidden" name="total" value="">
<input id="time" type="hidden" name="time" value="June 4th">
<input id="seat"type="hidden" name="seat" value="">
<button class="checkout-button">确认购买</button>
</form>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
</div>
<br/>
</div>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.seat-charts.min.js"></script>
<script type="text/javascript">var price = 30; //票价
$(document).ready(function() { //将函数绑定到文档的就绪事件(当文档完成加载时)
//定义三个变量来存储数据
var $cart = $('#selected-seats'), //座位区 id为selected-seats的元素
$counter = $('#counter'), //票数
$total = $('#total'); //总计金额
//$("#ticketnum")=$counter;
var sc = $('#seat-map').seatCharts({
map: [ //座位结构图 下划线 "_" 代表过道
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aa__aa__aa'
],
naming : {//设置行列等信息
top : false,//不显示顶部横坐标(行)
getLabel : function (character, row, column) {//获取
return column;
}
},
legend : { //定义图例
node : $('#legend'),
items : [
[ 'a', 'available', '可选座' ],
[ 'a', 'unavailable', '已售出']
]
},
click: function () { //点击事件
if (this.status() == 'available') { //可选座
$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')//规定要插入的内容(可包含 HTML 标签)。
.attr('id', 'cart-item-'+this.settings.id)//设置被选元素的属性和值。。
.data('seatId', this.settings.id)//向被选元素附加数据。
.appendTo($cart);//规定把内容追加到$cart上。 $counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //已选中
//更新数量
$counter.text(sc.find('selected').length-1);
//更新总计
$total.text(recalculateTotal(sc)-price);
//删除已预订座位
$('#cart-item-'+this.settings.id).remove();
//可选座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}
});
//已售出的座位
sc.get([ '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');});
$('#ticketnum').attr(value,ticketnum(sc));
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
function ticketnum(sc) {
var counter = 0;
sc.find('selected').each(function () {
counter += counter;
});
return counter;
}
function seat(sc) {
var seats = 0;
sc.find('selected').each(function () {
seats = seats+$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')//规定要插入的内容(可包含 HTML 标签)。
.attr('id', 'cart-item-'+this.settings.id)//设置被选元素的属性和值。。
.data('seatId', this.settings.id)//向被选元素附加数据。;
});
return seats;
}
function button1(){
document.getElementById('ticketnum')="ticketnum(sc)";
//document.getElementById("total");
//document.getElementById("seat"); }
</script>
</div>
<div id="process"></div>
<div id="footer">
<p>天津</p>
</div>
</div>
</body>
</html>
解决方案 »
- 用JQUERY改变表格某些Td的宽度,求指导啊~!!
- 球MSSQL2005一个循环语句的写法
- 看《精通JavaScript》的一個問題
- 求日期格式的转换:读取的日期格式默认为 "2008-10-12 下午 03:00:00",我该如何设置为"2008-10-12 15:00:00"格式?
- 求source
- 这个是什么错啊??
- 求助:關於file框的問題!
- 请问如何在用户点关闭网页或者离开网页时候执行一段JS?
- 关于width和bgcolor的两个问题
- 100分!math.found()怎样才能正确用在以“,“为小数点的数字上?
- javascript四舍五入保留两位小数不准确,有没有好的解决方案?
- javascript如何实现excel中的数据透视表或分类汇总的功能
直接 $('#ticketnum').val(ticketnum(sc)); document.getElementById('ticketnum')="ticketnum(sc)";这句错了,换成
$('#ticketnum').val(ticketnum(sc));或者
document.getElementById('ticketnum').value = ticketnum(sc);