Question

我正在制作一个座位表应用程序，用户可以在桌面上选择他们想要的椅子数量（1到13个座位）。问题是我无法找到一种方法来动态平均分配席位。如果用户选择3把椅子，那么它们周围应该有33.3％的空间。 4把椅子意味着25％的空间等等。

代码段是一个快速的模型。在选择更改时，应显示正确的座位数，并且彼此等距。

＆＃13;

.tableContain
{
  width: 300px;
  height: 300px;
  border: 3px dotted black;
  position: relative;
}
.table
{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.seat
{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div class="tableContain">
  <div class="table"></div>
  <div id="seat1" class="seat"></div>
</div>
Number Of Seats<select>
   <option val=1>1</option>
<option val=1>2</option>
<option val=1>3</option>
<option val=1>4</option>
</select>
<br>
<br>

＆＃13;

Answer 1

这是使用canvas的解决方案。基本上我们会监听select元素上的更改事件，并调用绘制可视化的函数此功能的工作原理是将圆分割为相等的段，并在每个段的末尾绘制一个圆。

const select = document.getElementById("seatsNum");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
const cW = canvas.width, cH = canvas.height;

function drawSeats(count) {
  ctx.clearRect(0, 0, cW, cH);
  const tableRad = cW*0.2;
  const chairRad = cW*0.05;
  
  ctx.strokeStyle = "#000";
  ctx.beginPath();
  ctx.arc(cW/2, cH/2, tableRad, 0, 2*Math.PI, false);
  ctx.stroke();
  
  ctx.fillStyle = "#ccc";
  const segment = 360 / count;
  for (let i = 0; i < count; i++) {
    const x = (tableRad + 2*chairRad) * Math.cos(i*segment*Math.PI/180);
    const y = (tableRad + 2*chairRad) * Math.sin(i*segment*Math.PI/180);
    ctx.beginPath();
    ctx.arc(cW/2 + x, cH/2 + y, chairRad, 0, 2*Math.PI, false);
    ctx.fill();
    ctx.stroke();    
  }
}

select.onchange = function(ev) {
  const val = select.value;
  drawSeats(val);  
}

drawSeats(1);

canvas {
  border: 3px dotted black;
  position: relative;
}

<div class="tableContain">
  <div class="table"></div>
  <div id="seat1" class="seat"></div>
</div>
<canvas id="canvas" width="300" height="300"></canvas>
<br/>
Number Of Seats
<select id="seatsNum">
  <option val="1">1</option>
  <option val="2">2</option>
  <option val="3">3</option>
  <option val="4">4</option>
  <option val="5">5</option>
  <option val="6">6</option>
  <option val="7">7</option>
  <option val="8">8</option>
  <option val="9">9</option>
  <option val="10">10</option>
  <option val="11">11</option>
</select>
<br>
<br>

Answer 2

CSS＆amp; HTML Divs

这是一个使用CSS和HTML div以及一些JavaScript来更新选择更改的工作示例。

＆＃13;

function renderSeats(num){
  
  var diff = 1 / num;
  var seats = '';
  
  for( i=0; i<num; i++){
    var rotate = (diff * 360) * i;
  	seats += '<div class="seat-wrap"\
                  style="transform:rotate('+rotate+'deg);">\
                <div class="seat"></div>\
              </div>'
  }
  
  document.querySelector('.seats').innerHTML = seats
}

document.querySelector('select').addEventListener('change', function(){
  renderSeats(this.value)
})

renderSeats(1)

＆＃13;

.tableContain
{
  width: 300px;
  height: 300px;
  border: 3px dotted black;
  position: relative;
}
.table
{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.seat-wrap {
  height: 100%;
  width: 100%;
  position: absolute;
  pointer-events: none;
}

.seat
{
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: all;
}

＆＃13;

<div class="tableContain" data-n="2">
  <div class="table"></div>
  <div class="seats"></div>
</div>

Number Of Seats

<select>
  <option val=1>1</option>
  <option val=1>2</option>
  <option val=1>3</option>
  <option val=1>4</option>
</select>

＆＃13;

在div周围同等分配元素？

2 个答案:

CSS＆amp; HTML Divs