おみくじアプリ【JavaScript】

2021年12月22日、アニメーションの設定を追記しました。
2021年12月20日、リロードボタンとタイマーの使い方を追記しました。
2021年12月15日、画像の表示の方法、サンプル、ソースコードを追加しました。

※自分用備忘録

JavaScriptで作るおみくじアプリです。

JavaScript

<script>
  let kujis = ["大吉", "中吉", "吉", "小吉", "末吉", "凶", "大凶"];
  let kuji = Math.floor(Math.random() * kujis.length);
  document.write("<p>おみくじの結果は、" + kujis[kuji] + "です</p>");
</script>

リロードすると出力される結果が変わります。

ボタンを押すと実行結果が出るようにしたり、画像やCSSで装飾すると華やかになります。

Math.random()は少数を含む数字をランダムに取得するための関数です。

Math.floorを併用すると整数を取得できます。

innerHTMLで結果を表示する場合

HTML

<p>おみくじの結果は<span id="kekka"></span>です</p>

JavaScript

<script>
   let kujis = ["大吉", "中吉", "吉", "小吉", "末吉", "凶", "大凶"];
   let kuji = Math.floor(Math.random() * 7);
   document.getElementById("kekka").innerHTML = kujis[kuji];
 </script>

ボタンを押したらおみくじの結果を表示する

HTML

<p>あなたの運勢は<span id="kekka"></span>です</p>

<button id="btn">
  くじを引く
</button>

<button>にidを設定します。

JavaScript

<script>
　 let kujis = ["大吉", "中吉", "吉", "小吉", "末吉", "凶", "大凶"];
 
　 document.getElementById("btn").addEventListener("click", function(){
   　let kuji = Math.floor(Math.random() * kujis.length);
   　document.getElementById("kekka").innerHTML = kujis[kuji]
 　});
</script>

addEventListenerでクリックしたら実行結果を表示するようにしています。

addEventListenerのclickの部分を変更したら、クリック以外の動作で結果を表示させることも可能です。

おみくじの結果を画像で表示

let kujisGazo = ["img/daikichi.png", "img/kichi.png", "img/kyo.png"];

画像を用意し、画像のパスを配列にまとめます。

document.getElementById("gazo").src = kujisGazo[kuji];

document.getElementById("gazo")に続けてsrcを指定すると画像を書き出すことができます。

「img/」と「.png」は共通する部分なので、下記のように記述することもできます。

let kujisGazo = ["daikichi", "kichi", "kyo"];

document.getElementById("gazo").src = "img/" + kujisGazo[kuji] + ".png";

リロードボタンの設定

<button id="reload" class="reload" onclick="window.location.reload();">
  もう一回引く
</button>

画面をリロードさせるボタンです。

onclick属性等に直接JavaScriptで「window.location.reload();」と記述します。

リロードボタンを後から出現するようにする

CSS

.reload {
  display: none;
}

JavaScript

setTimeout(function () {
  document.getElementById("reload").style.display = "block";
}, 5000);

タイマーを使い、おみくじを引き終わった後にリロードボタンを出現するように設定ができます。

CSSの「display: none;」であらかじめ消しておき、おみくじを引くボタンを押した数秒後にJavaScriptの「style.display = "block";」でnoneをblockに書き換えます。

setTimeout(関数function, 秒数);

タイマーの書き方

2021年12月22日、下記を追記しました。

アニメーションの設定

「opacity」や「transform」、CSSアニメーション、JavaScriptアニメーションで動きをつけるとよりよく仕上がります。

アニメーション例

img {
  transform:scale(2);
  opacity: 0;
}

img.anime {
  transform: none;
  opacity: 1;
  transition: 3s;
}

最初に「transform」で大きさや位置を変えておき、「opacity」を0にしておきます。
JavaScriptでクラスを付与し、「transform」をnone、「opacity」を1にし、「transition」を設定することで、動きのあるアニメーションを作ることができます。

transformでつけれる動き

• translate X軸方向Y軸方向に動かせます。（px、%）

• scale 1を基準とし画像の大きさを変えられます。

• rotate 画像の角度を変えられます（deg、turn）

• skew 画像を引っ張ったような形に変形できます。（deg）

• その他

おみくじアプリサンプル
リンク

ソースコード
GitHub