當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

模仿电影院座位预定效果

發布時間：2023/12/31 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了模仿电影院座位预定效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果

Html代碼：

<html> <head> <title>座位預定</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="js/jquery.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"); // 添加選中cssvar 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> <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"></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"></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"></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><div id="booking_desc"><div class="booking_left"><p style="color: #FBBC53;font-weight: bold; font-size: larger;">您選中的座位 </p><div id="selected_seat"></div><br><button id="bookNowButton" type="button" >現在預定</button><div id="errMsg"></div></div><div class="booking_right">每個座位的單價: 300.00 元<br><br><div id="total">總價：<span> 0 </span></div></div></div></div></html>

CSS代碼（style.css）：

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*/

JS代碼：就是jquery.min.js

當然上面的界面好丑，只是參考思路，集成到自己的項目中，比如一個預定時間的小功能：

總結

以上是生活随笔為你收集整理的模仿电影院座位预定效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：动态规划法求解最长递增子序列问题
下一篇： Redis 基础 - 短信验证码登录