JavaScriptで簡単なおみくじを作る方法です。
Demo
START!ボタンを押すとおみくじの結果が表示されます。
HTML
<div id="wrapper"> <h1>おみくじ</h1> <p>おみくじです。スタートボタンをクリックして始めよう！</p> <div id="output"></div> <div id="btn">START!</div> </div> <div id="overlay"></div><div id="output"></div>は、おみくじの結果を表示します。
<div id="overlay"></div>は、<div id="output"></div>の背後に表示するオーバーレイです。
CSS
body { background: #F5F5F5; } #wrapper { color: #333; text-align: center; } #btn { background: #F27398; border-radius: 6px; border: none; color: #fff; cursor: pointer; display: inline-block; padding: 20px 60px; text-decoration: none; } #output { background: #fff; border-radius: 10px; color: #333; height: 50vh; line-height: 50vh; overflow: hidden; position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; z-index: 1000; } #overlay { background: rgba(0, 0, 0, .7); height: 100%; position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } #output, #overlay { opacity: 0; transition: all 0.5s; visibility: hidden; } #output.fadein, #overlay.fadein { opacity: 1; visibility: visible; }初期設定として#outputと#overlayはopacity:0;とvisibility:hidden;を指定して非表示にしています。
#output.fadeinと#overlay.fadeinは、おみくじの結果をフェードインで表示させるためのクラスであり、後にJavaScriptで追加します。
JavaScript
(function() { var btn = document.getElementById('btn'); var output = document.getElementById('output'); var overlay = document.getElementById('overlay'); btn.addEventListener('click', function() { result(); overlay.classList.add('fadein'); output.classList.add('fadein'); }); overlay.addEventListener('click', function() { output.classList.remove('fadein'); overlay.classList.remove('fadein'); }); function result() { var index = Math.floor(Math.random() * 6); switch (index) { case 0: output.textContent = '大吉です。'; break; case 1: output.textContent = '吉です。'; break; case 2: output.textContent = '中吉です。'; break; case 3: output.textContent = '小吉です。'; break; case 4: output.textContent = '末吉です。'; break; default: output.textContent = '凶です。'; break; } } })();ポイントは以下の通りです。
おみくじの結果を決める
おみくじの結果はresult()関数で決めます。
function result() { var index = Math.floor(Math.random() * 6); switch (index) { case 0: output.textContent = '大吉です。'; break; case 1: output.textContent = '吉です。'; break; case 2: output.textContent = '中吉です。'; break; case 3: output.textContent = '小吉です。'; break; case 4: output.textContent = '末吉です。'; break; default: output.textContent = '凶です。'; break; } }result()関数が呼ばれる度にMath.floor(Math.random() * 6)で0~5のランダムな値を1つ取得します。
続けてswitch文で、取得した値indexに対応する結果を#outputに挿入します。値に対応する結果は以下の通りです。
| 値 | 結果 |
|---|---|
| 0 | 大吉 |
| 1 | 吉 |
| 2 | 中吉 |
| 3 | 小吉 |
| 4 | 末吉 |
| 5 | 凶 |
ボタンを押すとおみくじの結果が表示されるようにする
ボタン#btnを押すと、おみくじの結果が表示されるようにします。
btn.addEventListener('click', function() { result(); overlay.classList.add('fadein'); output.classList.add('fadein'); });処理の流れは
result()関数でおみくじの結果を決める。- オーバーレイ
#overlayと結果#outputに.fadeinクラスを追加してフェードインさせる。
です。
オーバーレイを押しておみくじを終了する
オーバーレイ#overlayを押すと結果#outputと自身#overlayをフェードアウトさせておみくじを終了します。
overlay.addEventListener('click', function() { output.classList.remove('fadein'); overlay.classList.remove('fadein'); });おわりに
以上で、JavaScriptによるおみくじの作り方を終わります。