jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。 効果は以下のとおりです。 コードは次のとおりです。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <meta name="viewport" content="width=デバイス幅; initial-scale=1.0"> <title>jQuery 劇場座席選択および予約エフェクト コード</title> <meta name="keywords" content="jQuery,座席選択"> <スタイル タイプ="text/css"> .デモ{ 幅: 700ピクセル; マージン: 40px 自動 0 自動; 最小高さ: 450px; } @media スクリーンと (最大幅: 360px) { .デモ{ 幅: 340ピクセル } } 。フロント { 幅: 300ピクセル; マージン: 5px 32px 45px 32px; 背景色: #f0f0f0; 色: #666; テキスト配置: 中央; パディング: 3px; 境界線の半径: 5px; } .予約の詳細{ フロート: 右; 位置: 相対的; 幅: 200ピクセル; 高さ: 450px; } .予約詳細 h3 { マージン: 5px 5px 0 0; フォントサイズ: 16px; } .予約詳細 p { 行の高さ: 26px; フォントサイズ: 16px; 色: #999 } .booking-details p span { 色: #666 } div.seatChartsセル{ 色: #182C4E; 高さ: 25px; 幅: 25px; 行の高さ: 25px; マージン: 3px; フロート: 左; テキスト配置: 中央; アウトライン: なし; フォントサイズ: 13px; } div.seatCharts-シート { 色: #fff; カーソル: ポインタ; -webkit-border-radius: 5px; -moz-border-radius: 5px; 境界線の半径: 5px; } div.seatCharts行{ 高さ: 35px; } div.seatCharts-seat.available { 背景色: #B9DEA0; } div.seatCharts-seat.focused { 背景色: #76B474; 境界線: なし; } div.seatCharts-seat.selected { 背景色: #E6CAC4; } div.seatCharts-seat.unavailable { 背景色: #472B34; カーソル: 許可されていません。 } div.seatChartsコンテナ{ 右境界線: 1px 点線 #adadad; 幅: 400ピクセル; パディング: 20px; フロート: 左; } div.seatCharts-凡例 { 左パディング: 0px; 位置: 絶対; 下: 16px; } ul.seatCharts-凡例リスト { 左パディング: 0px; } .seatCharts-凡例アイテム { フロート: 左; 幅: 90ピクセル; 上マージン: 10px; 行の高さ: 2; } span.seatCharts-legendDescription { 左マージン: 5px; 行の高さ: 30px; } .チェックアウトボタン{ 表示: ブロック; 幅: 80ピクセル; 高さ: 24px; 行の高さ: 20px; マージン: 10px 自動; 境界線: 1px 実線 #999; フォントサイズ: 14px; カーソル: ポインタ } #選択された座席{ 最大高さ: 150px; オーバーフロー-y: 自動; オーバーフローx: なし; 幅: 200ピクセル; } #選択された座席 li { フロート: 左; 幅: 72px; 高さ: 26px; 行の高さ: 26px; 境界線: 1px 実線 #d3d3d3; 背景: #f7f7f7; マージン: 6px; フォントサイズ: 14px; フォントの太さ: 太字; テキスト配置: 中央 } </スタイル> </head> <本文> <div id="メイン"> <div class="demo"> <div id="座席マップ"> <div class="front">画面</div> </div> <div class="予約の詳細"> <p>映画: <span>インターステラー</span></p> <p>時間: <span>11月14日 21:00</span></p> <p>座席数:</p> <ul id="選択された座席"></ul> <p>投票数: <span id="counter">0</span></p> <p>合計: <b>¥<span id="total">0</span></b></p> <button class="checkout-button">購入を確認</button> <div id="凡例"></div> </div> <div style="clear:both"></div> </div> <br /> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="jquery.seat-charts.min.js"></script> <script type="text/javascript"> var price = 70; /*チケット価格*/ $(ドキュメント).ready(関数() { var $cart = $('#選択された座席'), /*座席エリア*/ $counter = $('#counter')、 /*投票数*/ $total = $('#total'); /*合計金額*/ var sc = $('#seat-map').seatCharts({ map: [ /* 座席表 */ 「ああああああ」、 「ああああああ」、 '__________'、 「ああああああ__」、 「ああああああ」、 「ああああああ」、 「ああああああ」、 「ああああああ」、 「ああああああ」、 「あああああ」 ]、 ネーミング: 上: 偽、 getLabel: 関数(文字、行、列) { 戻り列; } }, legend: { /*凡例を定義する*/ ノード: $('#legend'), アイテム: [ ['a', 'available', '空席'], ['a'、'入手不可'、'販売済み'] ] }, click: function() { /*クリックイベント*/ if (this.status() == 'available') { /*オプションの座席*/ $('<li>' + (this.settings.row + 1) + 'row' + this.settings.label + 'seat</li>') .attr('id', 'cart-item-' + this.settings.id) .data('seatId', this.settings.id) .appendTo($cart); $counter.text(sc.find('selected').length + 1); $total.text(合計(sc) + 価格を再計算します); '選択された' を返します。 } else if (this.status() == 'selected') { /*選択済み*/ /*数量を更新*/ $counter.text(sc.find('selected').length - 1); /*合計を更新*/ $total.text(合計(sc) - 価格を再計算します); /*予約席を削除*/ $('#cart-item-' + this.settings.id).remove(); /*オプションシート*/ 'available' を返します。 } else if (this.status() == 'unavailable') { /*販売済み*/ '利用不可' を返します。 } それ以外 { this.style() を返します。 } } }); /*販売済み席*/ sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('利用不可'); }); /*合計金額を計算します*/ 関数 recalculateTotal(sc) { var 合計 = 0; sc.find('selected').each(function() { 合計 += 価格; }); 合計を返します。 } </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法
>>: Nginx に React プロジェクトをデプロイする方法の例
1. すべてのタグには対応する終了タグが必要です以前の HTML では、<p> や &l...
トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...
Tomcat が自動的にサービスを開始するように設定します。最近、問題が発生しました。サーバー上のプ...
Linux システムでは、環境変数は適用範囲に応じて、システムレベルの環境変数とユーザーレベルの環境...
目次frm ファイルと ibd ファイルの紹介frm ファイル回復テーブル構造ibd ファイル回復テ...
[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...
1. 新機能MySQL 5.7 はエキサイティングなマイルストーンです。デフォルトの InnoDB ...
MySQL データベースのバージョンを 5.6.28 から 8.0.11 にアップグレード中にプロジ...
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...
リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...
効果 html <本文> <div class="content&quo...
MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...
目次1. 書き込み可能: 書き込み可能2. 列挙可能: 列挙可能3. 設定可能: 設定可能オブジェク...