座席表をつくる
divを生成する
$('<div>')
→ドットを打つ
→text('名前');
$('<div>').text('名前');
説明がおかしいかな
①div id=roomのなかに、まずdivを13個生成したい。divのなかにはテキストで「名前」と入れておきたい：
→for文の中で13回まわす、divを生成し、一旦変数eleに格納する、
作ったeleを表側(html)の#roomの中に子要素として配置。
var ele=$('<div>').text('名前');
②配列でメンバーを宣言
さっきのtext('名前')の部分を書き換え、names[i]としてfor文の中でまわして全配列の要素を書き出すようにする
--->ここまで
$(function(){
var names=['山浦','森','大谷','松口','石井','平澤','辻村',
'高岸','岡野','駒井','岸本','ワタナベ','矢本'];
for (var i=0; i<13; i++){
var ele=$('<div>').text(names[i]);
$('#room').append(ele);
}
})
③#roomをcssで調整
④#room divを1/3サイズに
#roomの子要素を記述したいときは半角スペースであけて綴る
（いま#roomのなかに生成したdivが13入っているので、divは#roomの子要素になっている）
--->ここまで
body{
background: #cff;
}
#room{
width:80%; /*全体に縮小*/
margin:auto;/*中央配置*/
display: flex;
flex-wrap: wrap;/*一杯になったら折り返す*/
}
#room div{
box-sizing: border-box;/*ボーダーまで含めた幅をボックスサイズにせよ*/
width:31%;/*下のmarginが6％取るため全体を94として3で割る*/
border: solid 1px #ccc;
padding: 1rem;
text-align: center;
margin: 1%;/*外余白 ここが合計6％取る計算*/
background: #fff;
}
⑤上部にスクリーンを追加しついでにボタンも付ける。ボタンは<p>で包む。
htmlに追加
<h1>スクリーン</h1>
<p><button id="btn">席替え</button></p>
cssに追加
h1{
width:80%; /*全体に縮小*/
margin:auto;/*中央配置*/
border: solid 1px #ccc;
background: #eee;
text-align: center;
}
p{
text-align: center;
}
⑥ボタンを押したとき動作するよう「予約」にする
今までのjsの中身を
$('btn').on('click',function(){
で包む
--->ここまで
$(function(){
$('btn').on('click',function(){
var names=['山浦','森','大谷','松口','石井','平澤','辻村',
'高岸','岡野','駒井','岸本','ワタナベ','矢本'];
for (var i=0; i>13; i++){
var ele=$('<div>').text(names[i]);
$('#room').append(ele);
}
})
})
⑦配列の中をシャッフルしたい
ただ普通にランダムに配列から呼び出したらだぶりが起こる。シャッフルする必要がある。
やり方
乱数を2つ用意
配列の「何番と何番を交換するか」をその2つで制御
くりかえす
[1][2][3][4]
1番目と3番目を交換せよ
[3][2][1][4]
1番目と4番目を交換せよ
[4][2][1][3]
これを繰り返して配列をシャッフルする。
--->ここまで
test1.js
$(function(){
$('#btn').on('click',function(){
console.log('click');
var names=['山浦','森','大谷','松口','石井','平澤','辻村',
'高岸','岡野','駒井','岸本','ワタナベ','矢本'];
//配列をシャッフル
var temp;//一時格納
var r1,r2;//ランダムに交換する場所
for (var i=0; i<50; i++){
r1 = Math.floor(Math.random() * names.length);//floorで切り捨て、randomでランダム生成、生成する値は配列の長さを最大値
r2 = Math.floor(Math.random() * names.length);
temp = names[r1];//r1番目の配列の内容を一時格納
names[r1] = names[r2];//r1番目の配列をr2番目の配列に書き換え
names[r2] = temp;//元のr1番目の内容をr2に格納 交換終了
}
//出力
$('#room').empty();//実行前にいったん要素内を空に
for (var i=0; i<names.length; i++){
var ele=$('<div>').text(names[i]);
$('#room').append(ele);
}
});
});
