さぁ!検索しよう!

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#overlayopacity: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');
  });

処理の流れは

  1. result()関数でおみくじの結果を決める。
  2. オーバーレイ#overlayと結果#output.fadeinクラスを追加してフェードインさせる。

です。

オーバーレイを押しておみくじを終了する

オーバーレイ#overlayを押すと結果#outputと自身#overlayをフェードアウトさせておみくじを終了します。

overlay.addEventListener('click', function() {
    output.classList.remove('fadein');
    overlay.classList.remove('fadein');
  });

おわりに

以上で、JavaScriptによるおみくじの作り方を終わります。