「大吉です」とブラウザに表示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじゲーム</title>
</head>
<body>
大吉です。
</body>
</html>
JavaScriptで「大吉です!」とブラウザに表示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじゲーム</title>
</head>
<body>
<script>
document.write('大吉です!')
</script>
</body>
</html>
関数を使って「大吉です!!」とブラウザに表示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじゲーム</title>
</head>
<body>
<script>
function omikuji() {
document.write('大吉です!!')
}
omikuji()
</script>
</body>
</html>
1/3の確率で「大吉です♪」とブラウザに表示
その他は、吉、小吉が出てくる。(仮)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>おみくじゲーム</title>
</head>
<body>
<script>
function omikuji() {
const fortune = Math.floor(Math.random()*3) // 0~2の間でランダムで数字が変化する
if (fortune == 2) {
document.write('大吉です♪')
} else if (fortune == 1) {
document.write('吉です')
} else {
document.write('小吉です')
}
}
omikuji()
</script>
</body>
</html>
Math.random は0以上1未満の数字(小数点以下含む)が取得できます。これに3をかけると、0以上3未満の数字になります。それをさらに Math.floor で処理すると、小数点以下が削られて、0, 1, 2 のいずれかの整数になります。
文字の大きさとか色とかを変えたりしてみる
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>おみくじゲーム</title>
<style>
h1 { color: red; font-size: 200px;}
h2 { color: green; font-size: 100px;}
h3 { color: blue; }
</style>
</head>
<body>
<script>
function omikuji() {
const fortune = Math.floor(Math.random()*3)
if (fortune == 2) {
document.write('<h1>大吉です♪</h1>')
} else if (fortune == 1) {
document.write('<h2>吉です</h2>')
} else if (fortune == 0){
document.write('<h3>小吉です</h3>')
}
}
omikuji()
</script>
</body>
</html>