如何在電影院大廳佈置類似座位的東西

我想設計一些如下所示的內容。如何在html/css中進行佈局。我應該使用table還是flex會更好還是別的？如何在電影院大廳佈置類似座位的東西

2016-10-13 john doe

不是一個HTML專家，但......我第一次嘗試很可能會用HTML 2D畫布，然後javascript渲染正方形網格。該函數可以有一個查找表作爲輸入，它爲每個座位（行，列）產生座位狀態（空白，綠色，紅色）。 – BitTickler

你已經試過做什麼？ – Jhecht

表或flex將工作。而且我認爲你不應該問像我應該這樣做的問題......，這不是問題所在，也不是意見基礎問題。如果您遇到問題，請嘗試做某件事並提出具體問題。 – Hp93

-2

使用表，就像這樣：

.table tbody tr td:not(:first-child) { 
 
    border: 1px solid blue; 
 
    width: 1em; 
 
    height:1em; 
 
} 
 

 
.table tbody tr td:first-child { 
 
    font-weight:bold; 
 
} 
 

 
.table tr td:nth-child(5) { 
 
    border:none!important; 
 
} 
 

 
.table { 
 
    border-spacing: 3em; 
 
}

<table class="table"> 
 
<thead> 
 
    <tr> 
 
    <td></td> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td></td> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>A</td> 
 
    <td style="background-color:red;"></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:red;"></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>B</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:red;"></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>C</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>D</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:blue;"></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td style="background-color:blue;"></td> 
 
    </tr> 
 
</tbody> 
 
</table>

您還可以看到所呈現的表here

來源

2016-10-13 02:59:08

雖然這種風格的問題，往往會產生基於意見答案，並因此而皺起了眉頭，我認爲這是合法的詢問專家在開始投入工作之前如何解決某個問題的意見。

現在，我絕不是一名html專家。但是，雖然在問題中沒有提到，但我想這可能是關於在Web應用程序中顯示狀態信息而不是靜態HTML文檔。也許在需要的情況下，有一個websocket或基於計時器的頁面更新涉及。座位分配數據可能來自服務器。

在上面描述的場景中，沒有表格的方法可能如下所示。使用canvas（它允許漂亮的渲染，如果有足夠的時間投入）和javascript函數，使用從某處進入腳本的數據。

無論這種做法是最好一個基於HTML表格的解決方案，可能會回落到：

如何漂亮的圖片應該是什麼？
什麼是較不討人喜歡的工作？用腳本填充html表格或在腳本中渲染畫布圖片？

在這裏示出這種方法的一個小的原型：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Demo of a canvas used to render seat plan in a Cinema</title> 
 
     <script> 
 
      var EMPTY = 0; // Still available for reservation and purchase. 
 
      var RESERVED = 1; // reserved but not yet paid for. 
 
      var BOUGHT = 2; // bought and paid for. 
 

 
      function Point(x,y) { 
 
       return { X: x, Y: y } 
 
      } 
 
      function Size(w,h) { 
 
       return {Width: w, Height: h} 
 
      } 
 
      function Rectangle(left,top,width,height) { 
 
       return {TopLeft: Point(left,top), Size: Size(width,height)} 
 
      } 
 
      function seatColorFromSeatStatus(seatStatus) { 
 
       switch(seatStatus) { 
 
        case EMPTY: return "white"; 
 
        case RESERVED: return "green"; 
 
        case BOUGHT: return "red"; 
 
        default: return "black"; // Invalid value... 
 
       } 
 
      } 
 
      function mapSeatStatusToSeatColor(seats) 
 
      { 
 
       var result = {}; 
 
       for(seat in seats) { 
 
        result[seat] = seatColorFromSeatStatus(seats[seat]) 
 
       } 
 
       return result; 
 
      } 
 
      function seatKeyFromPosition(row,col) { 
 
       return JSON.stringify([row,col]); 
 
      } 
 
      function seatRowFromKey(key) { 
 
       return (JSON.parse(key))[0]; 
 
      } 
 
      function seatColFromKey(key) { 
 
       return (JSON.parse(key)[1]); 
 
      } 
 
      function getSeatInfo(nrows,ncolumns) { 
 
       var result = { NRows: nrows, NColumns: ncolumns, Seats : {} }; 
 
       for(row = 0; row < nrows; row++) { 
 
        for(col = 0; col < ncolumns; col++) { 
 
         result.Seats[seatKeyFromPosition(row,col)] = EMPTY; 
 
        } 
 
       } 
 
       result.Seats[seatKeyFromPosition(0,0)] = RESERVED; 
 
       result.Seats[seatKeyFromPosition(1,3)] = BOUGHT; 
 
       return result; 
 
      } 
 
      function renderSeat(ctx,r,fillColor) { 
 
       var backup = ctx.fillStyle; 
 
       ctx.strokeStyle = "blue"; 
 
       ctx.rect(r.TopLeft.X+2,r.TopLeft.Y+2,r.Size.Width-4,r.Size.Height-4); 
 
       ctx.stroke(); 
 
       ctx.fillStyle = fillColor; 
 
       ctx.fillRect(r.TopLeft.X+3,r.TopLeft.Y+3,r.Size.Width-5,r.Size.Height-5); 
 
       ctx.fillStyle = backup; 
 
      } 
 
      function renderSeatplan(seatInfo) { 
 
       var nrows = seatInfo.NRows; 
 
       var ncolumns = seatInfo.NColumns; 
 
       var seatColors = mapSeatStatusToSeatColor(seatInfo.Seats) 
 
       var canvas = document.getElementById("seatplan"); 
 
       var ctx = canvas.getContext("2d"); 
 

 
       var borderWidth = 10; 
 
       var rcContent = Rectangle(
 
        borderWidth 
 
        , borderWidth 
 
        , canvas.width - 2 * borderWidth 
 
        , canvas.height - 2 * borderWidth 
 
       ); 
 
       var szCell = Size(
 
        Math.floor(rcContent.Size.Width/(ncolumns + 1)) 
 
        , Math.floor(rcContent.Size.Height/(nrows + 1)) 
 
       ); 
 
       ctx.font = "30px Arial"; 
 

 
       for(row = -1; row < nrows; row++) { 
 
        for(col = -1; col < ncolumns; col++) { 
 
         var r = Rectangle(
 
          rcContent.TopLeft.X + szCell.Width * (col+1) 
 
          ,rcContent.TopLeft.Y + szCell.Height * (row+1) 
 
          ,szCell.Width 
 
          ,szCell.Height 
 
          ); 
 
         var center = Point(szCell.Width/2, szCell.Height/2); 
 
         if (row == -1 && col == -1) { 
 
          // nothing to render. 
 
         } 
 
         else if(row == -1){ 
 
          // render column headers as numbers... 
 
          ctx.fillStyle = "black"; 
 
          ctx.textAlign = "center"; 
 
          ctx.fillText(col.toString(),r.TopLeft.X+center.X,r.TopLeft.Y+center.Y+6); 
 
         } 
 
         else if(col == -1){ 
 
          // render row header 
 
          ctx.fillStyle = "black"; 
 
          ctx.textAlign = "center"; 
 
          ctx.fillText(String.fromCharCode(65 + row),r.TopLeft.X+center.X+4,r.TopLeft.Y+center.Y+6); 
 
         } 
 
         else 
 
         { 
 
          // render seat 
 
          renderSeat(ctx,r,seatColors[seatKeyFromPosition(row,col)]); 
 
         } 
 
        } 
 
       } 
 
      } 
 
     </script> 
 
    </head> 
 
    <body onload="renderSeatplan(getSeatInfo(10,16));"> 
 
     <h1>Seatplan</h1> 
 
     <canvas id="seatplan" width="640" height="480"></canvas> 
 
    </body> 
 
</html>

由於這是一個裸骨的方法，它不應當留未提及的，有web框架（例如角，node.js，...），這可能會在很少的代碼行中解決同樣的問題。

最後並非最不重要的，我向大家致歉那些究竟是誰是HTML的專家，找到我的編碼風格可怕;）

來源

2016-10-13 05:35:46 BitTickler

如何在電影院大廳佈置類似座位的東西

回答

相關問題