WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

if文を使ったおみくじ

2024年10月クラス

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>割合を設定したランダム</title>
<style>
img{
vertical-align: bottom;
max-width: 100%;
}
.box{
width: 240px;
margin: 50px auto 0;
}
#btn{
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1>今日の運勢占い</h1>
<p id="loto"><img src="img/kuji.png" alt=""></p>
<button id="btn" onclick="kuji();">おみくじを引く</button>
</div>

<script>

function kuji(){

//1~100までのランダムを作成
let num = Math.ceil(Math.random()*100);
console.log(num);

let daikichi = 40 //大吉の出る確率40%
let chukichi = 60 //中吉の出る確率は20%だけど、大吉の出る確率と合算する
let kichi = 95//吉の出る確率は35%だけど大吉、中吉と合算する
//凶の出る確率はそれ以外なので変数の登録は必要ない

if(num <= daikichi){
//1~15が出たら大吉
var raito = 0;
}else if(num <= chukichi){
//16~40が出たら中吉
var raito = 1;
}else if(num <= kichi){
//41~90が出たら吉
var raito = 2;
}else{
//それ以外が出たら凶
var raito = 3;
}
console.log(raito);

document.querySelector('#loto').innerHTML = '<img src="img/'+raito+'.png" alt="">'
}
</script>



</body>
</html>