電影票預訂座位前端js

時間 2019-11-17

標籤預訂座位前端欄目 JavaScript 简体版

原文原文鏈接

<!doctype html>css

<html>html

<head>node

<title>JSC Demo</title>jquery

</head>google

<body>spa

<div class="wrapper">code

<div class="front-indicator">Front</div>

</div>

<h2>Booking Details</h2>

<h3> Selected Seats (<span id="counter">0</span>):</h3>

Total: <b>$<span id="total">0</span></b>

<button class="checkout-button">Checkout »</button>

</div>

var firstSeatLabel = 1;

$(document).ready(function() {

var $cart = $('#selected-seats'),

$counter = $('#counter'),

$total = $('#total'),

sc = $('#seat-map').seatCharts({

map: [

'ff_ff',

'ee_ee',

'ee___',

'ee_ee',

'eeeee',

seats: {

f: {

price : 100,

classes : 'first-class', //your custom CSS class

category: 'First Class'

e: {

price : 40,

classes : 'economy-class', //your custom CSS class

category: 'Economy Class'

}

naming : {

top : false,

getLabel : function (character, row, column) {

return firstSeatLabel++;

legend : {

node : $('#legend'),

items : [

[ 'f', 'available', 'First Class' ],

[ 'e', 'available', 'Economy Class'],

[ 'f', 'unavailable', 'Already Booked']

]

click: function () {

if (this.status() == 'available') {

//let's create a new <li> which we'll add to the cart items

$('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')

.attr('id', 'cart-item-'+this.settings.id)

.data('seatId', this.settings.id)

.appendTo($cart);

* Lets update the counter and total

* .find function will not find the current seat, because it will change its stauts only after return

* 'selected'. This is why we have to add 1 to the length and the current seat price to the total.

$counter.text(sc.find('selected').length+1);

$total.text(recalculateTotal(sc)+this.data().price);

return 'selected';

} else if (this.status() == 'selected') {

//update the counter

$counter.text(sc.find('selected').length-1);

//and total

$total.text(recalculateTotal(sc)-this.data().price);

//remove the item from our cart

$('#cart-item-'+this.settings.id).remove();

//seat has been vacated

return 'available';

} else if (this.status() == 'unavailable') {

//seat has been already booked

return 'unavailable';

} else {

return this.style();

}

});

//this will handle "[cancel]" link clicks

$('#selected-seats').on('click', '.cancel-cart-item', function () {

//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here

sc.get($(this).parents('li:first').data('seatId')).click();

});

//let's pretend some seats have already been booked

sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');

});

function recalculateTotal(sc) {

var total = 0;

//basically find every selected seat and sum its price

sc.find('selected').each(function () {

total += this.data().price;

});

return total;

}

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。