ランダムメッセージ

2023年9月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、ページを読み込むたびにランダムで文章が変わるページを作ってみようと思います。

参考：TAG index｜ランダムメッセージ

スクリプトを書く

メッセージを表示させたい場所に<script>タグを使って直接記入します。

<script>
var msg = new Array();

msg[0] = '大吉';
msg[1] = '中吉';
msg[2] = '吉';
msg[3] = '小吉';
msg[4] = '末吉';
msg[5] = '凶';

var no = Math.floor(Math.random() * msg.length);

document.write(msg[no]);
</script>

Math.randomは0以上、1未満のランダムな小数を生成してくれるようです。

そこにmsg.length（選択肢の数。今回は6個）をかけて、Math.floorで小数点以下を切り捨てることで、0から5までの数値がランダムで生成されます。

画像もいけるよ

選択肢を<img>タグに変えると画像をランダムに表示できます。

冒頭のおみくじ画像はページを読み込むたびに結果がランダムで表示されます。

気のせいか、大吉が出にくいような・・・

<script>
var img = new Array();

img[0] = '<img src="img/dai-kichi.jpg" alt="大吉">';
img[1] = '<img src="img/kichi.jpg" alt="吉">';
img[2] = '<img src="img/chu-kichi.jpg" alt="中吉">';
img[3] = '<img src="img/sho-kichi.jpg" alt="小吉">';
img[4] = '<img src="img/sue-kichi.jpg" alt="末吉">';
img[5] = '<img src="img/kyo.jpg" alt="凶">';

var no = Math.floor(Math.random() * img.length);

document.write(img[no]);
</script>

ボタンで発動

毎回ページをリロードするのも面倒なので、ボタンでおみくじを引けるようにしてみましょう。

以下のスクリプトを記述します。

function Omikuji() {
  var img = new Array();

  img[0] = '<img src="img/dai-kichi.jpg" alt="大吉">';
  img[1] = '<img src="img/kichi.jpg" alt="吉">';
  img[2] = '<img src="img/chu-kichi.jpg" alt="中吉">';
  img[3] = '<img src="img/sho-kichi.jpg" alt="小吉">';
  img[4] = '<img src="img/sue-kichi.jpg" alt="末吉">';
  img[5] = '<img src="img/kyo.jpg" alt="凶">';

  var no = Math.floor(Math.random() * img.length);

  document.getElementById("kekka").innerHTML = (img[no]);
  document.querySelector("#kekka").animate([{
    transform: 'scale(0, 0)'
  },{
    transform: 'scale(1, 1)'
  }],{
    duration: 500,
    fill: 'forwards'
  });
}

これまでのdocument.writeだとなぜかうまくいかなかったので、getElementByIdを使って#kekkaに出力させることにします。

animateとtransformを使ってニュッと表示するようにしてみました。

結果出力欄のIDをkekkaにして、ボタンのonclickに関数「Omikuji」を設定します。

<div id="kekka"></div>
            
<button type="button" onclick="Omikuji();">おみくじを引く</button>

まとめ

おみくじには、大吉 > 吉 > 中吉 > 小吉 > 末吉 > 凶 の場合と、大吉 > 中吉 > 小吉 > 吉 > 末吉 > 凶 の場合があるようですね。

なぜ年始の記事でやらなかったし。