Help us understand the problem. What is going on with this article?

JavaScript でカンタンおみくじを作ってみる

More than 1 year has passed since last update.

目的

・JavaScriptを使っておみくじを作って飲み会における確率操作をしたい

ゴール

・JavaScriptでの文法超基礎を理解する
・ランダムな数値を出して、それをもとに表示を変える

こんな感じの超簡易的おみくじ
omikuji.gif

コード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id = "btn">push!</div>
  <script src=main.js></script>
</body>
</html>
style.css
@charset "utf-8";

body{
  background-color: #efefef;
}

#btn{
  margin:30px auto;
  width:200px;
  height:200px;
  border-radius: 50%;
  background:#EF454A;
  text-align: center;
  line-height:200px;
  color:#fff;
  font-size:42px;
  font-weight: bold;
  cursor:pointer;
  opacity:0.9;
  box-shadow:0 10px 0 #D1483E;
  border:3px solid #D1483E;
  user-select: none;
}

#btn:hover{
  opacity:1;
}

#btn.pushed{
  margin-top:36px;
  box-shadow:0 4px 0 #D1483E;
}

main.js
(function(){
  'use strict';

  var btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    var n = Math.random()
    if(n < 0.3){
      this.textContent = '大吉'; // 30%
    }else if (n < 0.45){
      this.textContent = '';  // 15%
    }else if (n < 0.60){
      this.textContent = '中吉';  // 15%
    }else if (n < 0.85){
      this.textContent = '小吉';  // 15%
    }else{
      this.textContent = '';  // 15%
    }

  });
  btn.addEventListener('mousedown', function(){
    this.className = 'pushed';
  });
  btn.addEventListener('mouseup', function(){
    this.className = '';
  });
})();

カンタンな解説

index.html
  <div id = "btn">push!</div>
main.js
  var btn = document.getElementById('btn');

htmlのbtnに対して、main.jsでbtnという変数を設定する。

main.js
  btn.addEventListener('click', function(){
   //この中にボタンをクリックした時の動きを記述する
  }

btnをクリックした時の動きを記述する。
動きとしては、0-1の間でランダムに生成される数のうち偏りを表示の基準とする。
つまり、
(前提)
・0~1までのランダムな数値が入る
(条件)
・0-0.3の間:「大吉」 →30%
・0.3-0.45の間:「吉」 →15%
・0.45-0.6の間:「中吉」 →15%
・0.6-0.75の間:「小吉」 →15%
・0.75-1の間:「凶」 →約25%(※)

(※)約としたのは、Math.random()の場合0から1を含まない間の数がランダムに生成されるため。よって厳密にはぴったり25%ではない。

これを記述すると以下のようになる。

main.js
  btn.addEventListener('click', function(){
    var n = Math.random();
    if(n < 0.3){
      this.textContent = '大吉'; // 30%
    }else if (n < 0.45){
      this.textContent = '';  // 15%
    }else if (n < 0.60){
      this.textContent = '中吉';  // 15%
    }else if (n < 0.75){
      this.textContent = '小吉';  // 15%
    }else{
      this.textContent = '';  // 25%
    }
shogotgm
型安全なフロントエンジニア
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away