jQueryで作るランダムおみくじ2021

 

あけましておめでとうございます。
2021年のお年賀として、新年のご挨拶ページを公開しました。
こちらではちょっとしたコンテンツとして、おみくじボタンを押したら、ランダムで結果と画像が出てくる新春おみくじを作成しています。

実装方法としてはjQueryを使用した単純なもので
① 1〜3の数字をランダムで決定する
② ❶で決まった数字に沿って結果を出力する
③ おみくじを引くボタンを作る
というのが大まかな内容です。

 

以下はコードのデモになります。

① 1〜3の数字をランダムで決定する

こちらは以下の方法で実装しています。

const cont = Math.ceil(Math.random()*3);

この書き方は整数をランダムで出す際によく使われる書き方になります

constとは変数であり、いわば値を入れておくための箱です。
ここにcontという名前をつけ、1〜3の数字をランダムで入れています。

Math.ceilとは小数点以下を切り上げて返すメソッドです。
Math.randomとは0 以上 1 未満の範囲で擬似乱数を返すメソッドです。

0 以上 1 未満の数字に3をかけることで、0〜3の数字を出力できます。
しかしこのままだとほぼ0.573や2.773など整数以外が出てきてしまうので、これを整数だけにするためにMath.ceilを使うんですね。 つまり0.573なら1、2.773なら3が返って来ます。

かける数字を増やせば、その分出てくる数字も増えます。例えば*9にしたら1~9の数字がランダムで抽選できます。

 

② ❶で決まった数字に沿って結果を出力する

if(cont == 1){
    $(".omikuji_name”).html("大吉が出ました");
    $(“.omikuji_text”).html("おめでとうございます。大吉が出ました。");
    $(".omikuji_img”).attr('src','common/img/daikichi.jpg');
}

上記はcontの数字が1だった場合です。
html()では、任意のhtml要素を書き換えています。
attr()では、任意のhtml要素の属性を取得してsrcの中身のみを書き換えています。

同様に、2の場合、3の場合…と内容を用意していくことで、おみくじの実装が可能です。ここまでがおみくじを抽選するためのコードです。

 

③ おみくじを引くボタンを作る

最後に、上記のコードを実行するためのボタンを追加します。
まずはおみくじ抽選のコードに名前をつけて呼び出しができるようにします。

function omikuji() {
//ここに抽選するためのコードを入れる
}

次に実行用のコードを追加します。

$(".omiguji_btn").on("click",function () {
        omikuji();
    });

html側にボタンを追加し、omiguji_btnというクラス名を追加したら完成です。

  

実際のページでは、おみくじボタンを押すと結果がポップアップで表示されるようになっていたり、もう一度おみくじを回すというリトライのボタンも追加しています。
webだからこそできるコンテンツが作れたかな、と思っておりますのでぜひアクセスしてみてください！

本年もしずおかオンラインのメディア、コンテンツもよろしくお願いします。

 

 

しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています