<!DOCTYPE html>
<html lang="ja">
<head><title>Game</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<script type="text/javascript" src="../game/game.js"></script>
<style>
body{
margin: 0;
height: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
body:after{
margin: 0;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
content: "";
background: pink;
/* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */
/* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */
background: linear-gradient(to bottom, pink 0%, #fff 100%);
z-index: -1;
}
h1{
text-align: center;
}
p{
margin: 0 auto;
text-align: center;
}
button{
margin: 0 auto;
text-align: center;
}
h2{
text-align: center;
}
h3{
text-align: center;
}
.un{
color: red;
}
</style>
</head>
<body>
<div class="inner">
<h1>〜今日のおみくじ〜</h1>
<p><button id="btn" onclick="Omikuji();"> おみくじ結果を見てみる </button></p>
<h2>あなたの今日の運勢は...</h2>
<h3 class="un" id="kuji"></h3>
<h2>ラッキーカラーは...</h2>
<h3 id="iro"></h3>
</div>
<script>
var btn = document.getElementById('btn');
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
btn.addEventListener('click', function() {
let r = Math.floor( Math.random() * omikuji.length) ;
document.getElementById("kuji").innerHTML = omikuji[r]
let c = Math.floor( Math.random() * color.length) ;
document.getElementById("iro").innerHTML = color[c]
}, false);
</script>
</body>
</html>
