电影票选票布局选票效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<title>座位预定</title>
<style>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
background: #250d0b url(images/templatemo_bg.jpg) top repeat-x;
}
/*start booking*/
#screen {
display: block;
width: 600px;
color: red;
font-weight: bold;
background-color: #FFFFFF;
border: 3px solid #af1313;
text-align: center;
margin: 10px auto 20px auto;
}
#seats {
border: 1px solid green;
width: 844px;
margin: 0 auto;
padding: 10px;
background: white;
}
.seat {
float: left;
width: 32px;
box-sizing: border-box;
color: #676767;
padding: 1px;
height: 30px;
background: #D8D8D8;
border: 1px solid #979797;
margin: 5px;
border-bottom: 3px solid #F35E4F;
cursor: pointer;
}
.seatsRaw {
display: inline-block;
}
#booking_desc {
width: 550px;
/* border: 1px solid red; */
background-color: #3C3636;
color: #FAFAFA;
margin: 30px auto;
padding: 10px;
display: table;
}
.booking_left, .booking_right {
width: 250px;
float: left;
}
#total span {
font-size: 16px;
color: burlywood;
}
#errMsg {
color: #FF7777;
}
/*end booking*/
</style>
<script src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
var seat_num;
var total_bill = 0;
var pricePerTicked = 300; //单价
var maximumSeats = 5; //预定座位数目的最大限制
$('#bookNowButton').hide(); // 隐藏预定按钮
$('.seat').each(function() {
var column_num = parseInt($(this).index()) + 1;
var row_num = parseInt($(this).parent().index())+1;
seat_num = row_num+"-"+column_num;
$(this).text(seat_num); // 座位号
$(this).addClass("seat"+seat_num); // 个座位加css
});
$("#seats .seat").click(function() {
$('#errMsg').html('');
if ($(this).hasClass('select')) {
// 检查是否被选中
$(this).removeClass('select'); //如果选中了，移除选中的css
$(this).css('background-color', '#D8D8D8'); // 重新加个背景
var currentSeatClass = $(this).attr('class').split(' ')[1];
console.log(currentSeatClass);
$("#selected_seat ."+currentSeatClass).remove();
} else if ($(".your_selected_seat").length < maximumSeats && !$(this).hasClass('select')) {
// 检查预定的座位数目是否超出限制
$(this).css('background-color', '#71DCAA'); // 加背景颜色
$(this).addClass("select"); // 添加选中css
var column_num = parseInt($(this).index()) + 1;
var row_num = parseInt($(this).parent().index())+1;
$("#selected_seat").append("<span class='your_selected_seat seat"+row_num+"-"+column_num+" '> 座位号: <b style='color:#EAABFF'>" + row_num+"-"+column_num +"</b> </br></span>");
} else {
$('#errMsg').html('您选中的座位已经超过限制.');
}
if ($(".your_selected_seat").length) {
$('#bookNowButton').fadeIn(1000);
} else {
$('#bookNowButton').fadeOut(1000);
}
//计算总价
total_bill = $(".your_selected_seat").length * pricePerTicked;
$('#total > span').html(total_bill);
});
//}
});
</script>
</head>
<body>
<!--BOOKING SECTION START-->
<div style="width:900px;margin: 0 auto;">
<span id='screen'>
<p>
座位预定
</p>
</span>
<div id="seats">
<div class="seatsRaw">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="seatsRaw">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div class="seatsRaw">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat">&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0