「おみくじ」ソースのまとめ

以下に、今回の記事でご紹介してきたすべてのソースを一括して掲載しています。コピー&ペーストして使ってみる際などにご活用下さい。

スタイルシートとJavaScriptは head要素内に、 HTMLソースは「おみくじ」を実際に表示させたいbody要素内の箇所に記述します。

<style type="text/css"><!--
div.omikujibase {
   /* 画像を表示 */
   background-image: url("docplate.jpg");
   background-repeat: no-repeat;
   background-position: top left;
   /* 画像のサイズに合わせる */
   width: 149px;
   height: 139px;
   /* 行間を詰める */
   line-height: 1.2;
}
div.omikujibase p.kRes {
   /* くじの結果 */
   margin: 0px;
   padding: 5px 0px 0px 5px;
   font-size: 21pt;
}
div.omikujibase p.kCom {
   /* くじのコメント */
   margin: 0px;
   padding: 3px 89px 0px 3px;
   font-size: 8pt;
}
p.button {
   /* ボタンの表示 */
   width: 149px;
   margin: 5px 0px;
   text-align: center;
}
--></style>
<script type="text/javascript"><!--
mres = new Array();
mcom = new Array();
// おみくじの結果とコメント集
mres[0] = '大吉'; mcom[0] = '今日はラッキーな日';
mres[1] = '中吉'; mcom[1] = 'いいことあるかも?';
mres[2] = '小吉'; mcom[2] = 'そこそこ良い日かも';
mres[3] = ''; mcom[3] = '頑張れば報われる?';
mres[4] = '末吉'; mcom[4] = 'まあまあでしょう。';
// 関数
function ShowKuji(kRes,kCom) {
   // くじを選ぶ
   var kuji = Math.floor(Math.random()*mres.length);
   // くじを表示
   document.getElementById(kRes).innerHTML = mres[kuji];
   document.getElementById(kCom).innerHTML = mcom[kuji];
}
// --></script>
<div class="omikujibase">
   <p id="KujiRes" class="kRes">??</p>
   <p id="KujiCom" class="kCom">***</p>
</div>
<p class="button"><input type="button" value="おみくじを引く" onclick="ShowKuji( 'KujiRes', 'KujiCom' );"></p>

おわりに

今回は、JavaScriptを使って「おみくじ」を作る方法をご紹介いたしました。 ページを移動せず、別ウインドウも開かない、シンプルな「おみくじ」です。 ぜひ、試してみて下さい。

【関連記事】




■All Aboutで「お金」について、アンケートを実施中です!
回答いただいた内容をAll About記事企画の参考にさせていただきます
※2021/6/1~2021/6/30まで

・【誰でも回答可】「毎月の家計についてのアンケート」に回答する
抽選で10名にAmazonギフト券1000円分プレゼント

・【40歳以上限定】「相続と親の資産管理についてのアンケート」に回答する
抽選で20名にAmazonギフト券1000円分プレゼント

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。