7/7 その場で表示が変化する「おみくじ」を作る [ブログの始め方] All About

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

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

スタイルシートと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>