席替えシミュレーションV2

2019年7月14日2019年9月21日

以前ご紹介した席替え占いシミュレーションの改良版です。
席替え占いシミュレーション

男女の席を配置できるだけでなく、席順（選択された順序）を表示できるようになりました。

これで実際の席替えのときにも役立つはずです。

意外と大変だった…。

※chrome推奨です。
chromeでないと席を配置したときに表示がずれる可能性が高いです。

主なソースとしてjsはこんな感じです。

const line = 6;
const column = 6;
const maxSeats = 40;
var limitCt = 0;
var indexCt = 0;
window.onload = function() {
  let k = 1;
  for (let i = 1; i <= line; i++) {
    for (let j = 1; j <= column; j++) {
      const div = document.createElement('div');
      div.id='seat_' + k;
      div.classList.add('box');
      div.classList.add('flex');
      document.body.appendChild(div);
      k++;
    }
    const div2 = document.createElement('div');
    document.body.appendChild(div2);
  }
  const div = document.createElement('div');
  div.classList.add('box');
  div.classList.add('flex');
  div.classList.add('dummy');
  document.body.appendChild(div);

  for (let i = 1; i < 5; i++) {
    const div = document.createElement('div');
    div.id='seat_' + k;
    div.classList.add('box');
    div.classList.add('flex');
    document.body.appendChild(div);
    k++;
  }
}

var setSheat = function(clickedButton) {
  let setCt = true;
  while(setCt  && limitCt < maxSeats){
    let seatCt = Math.floor(Math.random() * maxSeats + 1);
    let attr = document.getElementById("seat_" + seatCt);
    if (!attr.classList.contains('man') && !attr.classList.contains('woman')){
      attr.classList.add(clickedButton);
      indexCt++;
      attr.innerHTML=indexCt;
      setCt = false;
      limitCt++;
    }
  }
};

var reset = function() {
  for (let k = 1; k <= maxSeats; k++) {
      var attr = document.getElementById("seat_" + k);
      if (attr.classList.contains('man')){
        attr.classList.remove('man');
        attr.innerHTML="";
      }
      if (attr.classList.contains('woman')){
        attr.classList.remove('woman');
        attr.innerHTML="";
      }
  }
  limitCt = 0;
  indexCt = 0;
};

const line = 6;

const column = 6;

const maxSeats = 40;

var limitCt = 0;

var indexCt = 0;

window.onload = function() {

let k = 1;

for (let i = 1; i <= line; i++) {

for (let j = 1; j <= column; j++) {

const div = document.createElement('div');

div.id='seat_' + k;

div.classList.add('box');

div.classList.add('flex');

document.body.appendChild(div);

k++;

}

const div2 = document.createElement('div');

document.body.appendChild(div2);

}

const div = document.createElement('div');

div.classList.add('box');

div.classList.add('flex');

div.classList.add('dummy');

document.body.appendChild(div);

for (let i = 1; i < 5; i++) {

const div = document.createElement('div');

div.id='seat_' + k;

div.classList.add('box');

div.classList.add('flex');

document.body.appendChild(div);

k++;

}

var setSheat = function(clickedButton) {

let setCt = true;

while(setCt && limitCt < maxSeats){

let seatCt = Math.floor(Math.random() * maxSeats + 1);

let attr = document.getElementById("seat_" + seatCt);

if (!attr.classList.contains('man') && !attr.classList.contains('woman')){

attr.classList.add(clickedButton);

indexCt++;

attr.innerHTML=indexCt;

setCt = false;

limitCt++;

}

};

var reset = function() {

for (let k = 1; k <= maxSeats; k++) {

var attr = document.getElementById("seat_" + k);

if (attr.classList.contains('man')){

attr.classList.remove('man');

attr.innerHTML="";

}

if (attr.classList.contains('woman')){

attr.classList.remove('woman');

attr.innerHTML="";

}

limitCt = 0;

indexCt = 0;

};

私の今までの成果物はこちらです。
成果物一覧

最後までお読みいただきありがとうございます。
よろしければブログやTwitterでのシェアをお願いしております。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

直接契約ができるフリーランスエージェント「エンハンス」を立ち上げました。
詳しくは下記LPをご参照ください。
https://enhance.decryption.co.jp/

Youtubeチャンネル開設いたしました。
チャンネル登録者10,000人を目指しているので、良いと思った方はチャンネル登録をお願いしたいです。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw

成果物

Posted by ちこ

水天宮にお参りに行ってきた

資格合格に頭がいいかどうかはそんなに関係が無い

コメント一覧

まだ、コメントがありません