3 thoughts on “【jQuery & CSS】2016年申年のおみくじ”

1. 

   アース says:

   2016年12月23日 at 4:13 AM

   はじめまして。
   サイト拝見させていただき、勉強しております。
   早速ですが、おみくじクリック後にテキストではなく用意した画像を結果として表示したいのですが、どう修正すればよろしいかご教授していただけますでしょうか？
   よろしくお願いします。

   返信
   • 

     ofuta says:

     2017年5月9日 at 10:43 AM

     アースさん
     コメントありがとうございます。
     （返信が大変遅くなりすみません。）
     以下、回答となります。

     ▼背景画像として表示する場合
     【jQuery】おみくじ　二号機にて使用しています。以下の部分が該当します。

     $(function() {
     	$("#getFortune").click(function() {
     		/* 0から100の範囲 */
     		var result = Math.floor( Math.random() * 100 );
     		if( result <= 14 ) {//0以上14未満//大吉
     			$('#bodyArea').css('background-image', 'url(images/excellent_luck.jpg)');
     		} else if( 14 < result && result <= 39 ) {//15以上39未満//中吉
     			$('#bodyArea').css('background-image', 'url(images/chukichi.jpg)');
     		} else if( 39 < result && result <= 64 ) {//40以上64未満//小吉
     			$('#bodyArea').css('background-image', 'url(images/shokichi.jpg)');
     		} else if( 64 < result && result <= 79 ) {//65以上79未満//末吉
     			$('#bodyArea').css('background-image', 'url(images/sueyoshi.jpg)');
     		} else if( 79 < result && result <= 94 ) {//80以上94未満//凶
     			$('#bodyArea').css('background-image', 'url(images/misfortune.jpg)');
     		} else {//95以上100未満//大凶
     			$('#bodyArea').css('background-image', 'url(images/daikyo.jpg)');
     		}
     
     	});
     });
     

     ▼imgでHTML上に表示する場合
     HTML上に、imgの読み込み位置を用意して

     <img src="image/0.jpg" alt="この画像が切り替わります。" id="img">
     

     jQueryでクリックの際にsrcとaltの中身を変更

     $(function() {
     	$("#getFortune").click(function() {
     		/* 0から100の範囲 */
     		var result = Math.floor( Math.random() * 100 );
     		if( result <= 14 ) {//0以上14未満//大吉
     			$("#img").attr({"src":"image/1.jpg","alt":"大吉"});
     		} else if( 14 < result && result <= 39 ) {//15以上39未満//中吉
     			$("#img").attr({"src":"image/2.jpg","alt":"中吉"});
     		} else if( 39 < result && result <= 64 ) {//40以上64未満//小吉
     			$("#img").attr({"src":"image/3.jpg","alt":"小吉"});
     		} else if( 64 < result && result <= 79 ) {//65以上79未満//末吉
     			$("#img").attr({"src":"image/4.jpg","alt":"末吉"});
     		} else if( 79 < result && result <= 94 ) {//80以上94未満//凶
     			$("#img").attr({"src":"image/5.jpg","alt":"末吉"});
     		} else {//95以上100未満//大凶
     			$("#img").attr({"src":"image/6.jpg","alt":"大凶"});
     		}
     	});
     });
     

     で、いかがでしょうか？

     返信
2. 

   rih-saru says:

   2017年12月13日 at 6:20 AM

   初めまして。
   こちら参考におみくじ作らさせていただきます〜！！！
   よろしくお願いします。

   返信

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。