dotinsallでおみくじアプリ作成を勉強したので学んだことをまとめておこう。
●ランダムな数を生成するMath.random()を使って条件分岐が基本。
結果の表示方法は①switch文、②result = []としてresult[n]のように配列でまとめる。
③if文で確率ごとに条件分け、がある。
特に配列で取得するやり方は今後かなり使えそう。実際のアプリで配列を初めて使って感動した。
●ボタンを押した感を出すには下部の影とmargin-topの操作で可能
●cursor: pointer にすると手のようになってくれる
●opacity は透明性で０だと完全に透明
以下、コード例
htmlコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おみくじ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="btn">?</div>
<script src="js/main.js"></script>
</body>
</html>
CSSコード
body{
background: #efefef;
}
#btn{
width: 200px;
height: 200px;
background: #ef454a;
border-radius: 50%;
margin: 30px auto;
text-align: center;
line-height: 200px;
color: #fff;
font-weight: bold;
font-size: 42px;
cursor: pointer;
/* cursorで矢印からポインターに変わる */
box-shadow: 0 10px 0 #d1483e;
/* 下に影をつける */
user-select: none;
/* 連打しても選択なし */
}
#btn:hover{
opacity: 0.8;
/* opacityとは透明性 ０で完全に透明 */
}
#btn:active{
box-shadow: 0 5px 0 #d1483e;
margin-top: 35px;
/* ボタンを押してる感を出す。下の影を小さくし、元の丸を同じ分だけ下げる */
}
javascriptコード
'use strict';
{
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=>{
const n = Math.random();
//if文で確率を条件わけ
if(n < 0.05){ //５％
btn.textContent = '大吉'
}else if(n < 0.2){
btn.textContent = '中吉'
}else{
btn.textContent = '凶'
}
})
}
//配列でまとめる方法
const results = ['大吉','大吉','大吉','大吉','凶']
const n = Math.floor(Math.random()*4);
// 要素数を記入してたら間違えやすいため、lengthで書いておく
const n = Math.floor(Math.random()*results.length);
btn.textContent = results[n];
// btn.textContent = results[Math.floor(Math.random()*results.length)];
//直接配列のインデックスにいれることができる
//結果を配列に入れて結果を表示
//switchを使うよりすっきり！！
switch(n){
case 0:
btn.textContent = '大吉'
break;
case 1:
btn.textContent = '中吉'
break;
case 2:
btn.textContent = '凶'
break;
}
})
}