JavaScriptでおみくじ

動作サンプル

See the Pen js おみくじ by takapen (@takapen) on CodePen.

html

ここが切り替わる
占う

css

.pushed {background: #ccc;}

js

(function() { //即時関数で囲う。他のプログラムに影響を与えないため。
  "use strict"; //厳格モードで実行される。より的確なエラーチェックが行われる。

  document.getElementById("js-btn").addEventListener("click", function() {
    var results = ["大吉", "小吉", "中吉", "吉", "凶"];
    
    //0から3までの数を生成したい場合
    // まずMath.randomで0から0.99999....の乱数を生成
    // それを4倍することで、0から3.99999....までの乱数を生成
    // Math.floorで小数点以下切り捨てになるので0から3までの整数の乱数が生成できる
    // var result = Math.floor(Math.random() * 4);
    
    //数でなくresults.lengthにすることでresultsの数を変更したときのミスを減らせる
    var result = Math.floor(Math.random() * results.length);
    
    document.getElementById("js-result").innerHTML = results[result];
  });

  document.getElementById("js-btn").addEventListener("mousedown", function() {
    this.className = "pushed";
  });

  document.getElementById("js-btn").addEventListener("mouseup", function() {
    this.className = "";
  });

})();

See the Pen js おみくじ2 by takapen (@takapen) on CodePen.

参照 ： ドットインストール