おみくじを作成しているのですが、

クリック後に画像で表示させたいので、ご教授お願いします。

http://kittoo.net/omikujisite/

上記URLでおみくじクリックして結果がテキストで表示されるのですが、テキストではなく画像で表示させたい。

画像は「大吉」、「中吉」等画像で20種類ぐらい作成します。

参照URLのようにデフォルトはおみくじ画像のみで、クリック後(アニメーション後)に結果の画像(大吉、中吉等20種類のなかから1つランダムで)を表示させたいのです。

以下のスプリクトをどのように修正すればいいのか教えていただけますでしょうか?
http://kittoo.net/omikujisite/js/omikuji.js


HTMLは以下
<table id="result">
<thead>
<tr>
<th class="no">第<span></span>番</th>
<th class="result"></th>
</tr>
</thead>
</table>

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2016/12/23 10:24:52
  • 終了:2016/12/23 14:06:57

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4595ベストアンサー獲得回数19342016/12/23 13:19:23

ポイント180pt

こんな感じ。

$(function() {
    $("#getFortune").click(function() {
        /* 0から100の範囲 */
        var result = Math.floor( Math.random() * 100 );
        var com =['大吉','中吉','小吉','吉','半吉','末吉','末小吉','凶','小凶','半凶','末凶','大凶'];
        // ★画像の URL
        var com_img = [
            'result_dai_kichi.jpg',     // 大吉
            'result_chu_kichi.jpg',     // 中吉
            'result_sho_kichi.jpg',     // 小吉
            'result_kichi.jpg',         // 吉
            'result_han_kichi.jpg',     // 半吉
            'result_sue_kichi.jpg',     // 末吉
            'result_suesho_kichi.jpg',  // 末小吉
            'result_kyo.jpg',           // 凶
            'result_sho_kyo.jpg',       // 小凶
            'result_han_kyo.jpg',       // 半凶
            'result_sue_kyo.jpg',       // 末凶
            'result_dai_kyo.jpg',       // 大凶
        ];
        
        var omikuji;
        var omikuji_img;    // ★

        if( result <= 18 ) {//0以上18未満//大吉
            omikuji = com[0];
            omikuji_img = com_img[0];   // ★
        } else if( 18 < result && result < 33 ) {//18以上33未満//中吉
            omikuji = com[1];
            omikuji_img = com_img[1];   // ★
        } else if( 33 < result && result < 48 ) {//33以上48未満//小吉
            omikuji = com[2];
            omikuji_img = com_img[2];   // ★
        } else if( 48 < result && result < 58 ) {//48以上58未満//吉
            omikuji = com[3];
            omikuji_img = com_img[3];   // ★
        } else if( 58 < result && result < 68 ) {//58以上68未満//半吉
            omikuji = com[4];
            omikuji_img = com_img[4];   // ★
        } else if( 68 < result && result < 76 ) {//68以上76未満//末吉
            omikuji = com[5];
            omikuji_img = com_img[5];   // ★
        } else if( 76 < result && result < 84 ) {//76以上84未満//末小吉
            omikuji = com[6];
            omikuji_img = com_img[6];   // ★
        } else if( 76 < result && result < 90 ) {//84以上90未満//凶
            omikuji = com[7];
            omikuji_img = com_img[7];   // ★
        } else if( 90 < result && result < 94 ) {//90以上94未満//小凶
            omikuji = com[8];
            omikuji_img = com_img[8];   // ★
        } else if( 94 < result && result < 97 ) {//94以上97未満//半凶
            omikuji = com[9];
            omikuji_img = com_img[9];   // ★
        } else if( 97 < result && result < 99 ) {//97以上99未満//末凶
            omikuji = com[10];
            omikuji_img = com_img[10];  // ★
        } else {//99以上100//大凶
            omikuji = com[11];
            omikuji_img = com_img[11];  // ★
        }
        
        
        $("#getFortune").addClass('after').fadeOut(2000);
        $("#result").delay(2000).fadeIn(2000);
        $("#result tr .no span").text(result);
//      $("#result tr .result").text(omikuji);
        $("#result tr .result").html('<img src="' + omikuji_img + '">');    // ★


    });
});

用意する画像をそのまま HTML に差し込んでいます。
画像の大きさによっては、スタイルシートで大きさを調整する必要があります。

画像のファイル名を通し番号にしたりとかすると、もっと短く書けるような気もしますが、元のソースを活かしてあります。
追加したところには、コメントで「★」を入れてあります。
元のソースの文字列の部分は、(必要ないけど)残してありますので、動作を確認したら消しちゃってください。

他2件のコメントを見る
id:a-kuma3

そういったことも踏まえて、ぼくならこう書くと思います。

    function get_display_data(num) {
        var data = [
            [ 18  , '大吉'   , '/result_dai_kichi.jpg',    ],
            [ 33  , '中吉'   , '/result_chu_kichi.jpg',    ],
            [ 48  , '小吉'   , '/result_sho_kichi.jpg',    ],
            [ 58  , '吉'     , '/result_kichi.jpg',        ],
            [ 68  , '半吉'   , '/result_han_kichi.jpg',    ],
            [ 76  , '末吉'   , '/result_sue_kichi.jpg',    ],
            [ 76  , '末小吉' , '/result_suesho_kichi.jpg', ],
            [ 90  , '凶'     , '/result_kyo.jpg',          ],
            [ 94  , '小凶'   , '/result_sho_kyo.jpg',      ],
            [ 97  , '半凶'   , '/result_han_kyo.jpg',      ],
            [ 99  , '末凶'   , '/result_sue_kyo.jpg',      ],
            [ 999 , '大凶'   , '/result_dai_kyo.jpg',      ],
        ];

        for (i = 0 ; i < data.length ; ++i) {
            if (num < data[i][0]) {
                return data[i];
            }
        }

        // ここには来ないはず
        alert("ERROR !!!");
        return null;
    }


    /* 0から100の範囲 */
    var result = Math.floor( Math.random() * 100 );
    
    var data = get_display_data(result);

    var omikuji = data[1];
    var omikuji_img = data[2];

    ...

書き方はいろいろとありますが、意識していることは

  • データを配列で持つこと
  • 関数にすること

です。

データを配列で持つことによって、判定の境界値を間違うこと(以下と未満の取り違えとか)はあっても、歯抜けになるようなミスは起こりえません。

関数にすることのメリットは、テストができることです。
例えば、

    // test
    for (ii = 0 ; ii < 100 ; ++ii) {
        console.log(ii, get_display_data(ii));
    }

こんな感じで、乱数で発生させる 0 から 99 を全て渡して、その結果を確認してみる。

# 蛇足でした :-)

2016/12/23 21:28:01
id:yato12

新設丁寧にアドバイス有難うございます。
勉強になりました。

2016/12/26 11:58:11

その他の回答(1件)

id:rsc96074 No.1

rsc回答回数4401ベストアンサー獲得回数4042016/12/23 10:57:07

ポイント20pt

 こちらは参考になるでしょうか。
イヌでもわかるJavaScript講座 - おみくじ その2
JavaScriptでおみくじ

id:yato12

参考URLありがとうございます。

初期画面はおみくじ画像のみで、

おみくじクリック(アニメーション後)に結果を表示したいのです。。

2016/12/23 11:29:16
id:yato12

初期画面は おみくじ画面のみで クリック後に 結果を表示させたいのです。

id:yato12

質問文を編集しました。詳細はこちら

id:a-kuma3 No.2

a-kuma3回答回数4595ベストアンサー獲得回数19342016/12/23 13:19:23ここでベストアンサー

ポイント180pt

こんな感じ。

$(function() {
    $("#getFortune").click(function() {
        /* 0から100の範囲 */
        var result = Math.floor( Math.random() * 100 );
        var com =['大吉','中吉','小吉','吉','半吉','末吉','末小吉','凶','小凶','半凶','末凶','大凶'];
        // ★画像の URL
        var com_img = [
            'result_dai_kichi.jpg',     // 大吉
            'result_chu_kichi.jpg',     // 中吉
            'result_sho_kichi.jpg',     // 小吉
            'result_kichi.jpg',         // 吉
            'result_han_kichi.jpg',     // 半吉
            'result_sue_kichi.jpg',     // 末吉
            'result_suesho_kichi.jpg',  // 末小吉
            'result_kyo.jpg',           // 凶
            'result_sho_kyo.jpg',       // 小凶
            'result_han_kyo.jpg',       // 半凶
            'result_sue_kyo.jpg',       // 末凶
            'result_dai_kyo.jpg',       // 大凶
        ];
        
        var omikuji;
        var omikuji_img;    // ★

        if( result <= 18 ) {//0以上18未満//大吉
            omikuji = com[0];
            omikuji_img = com_img[0];   // ★
        } else if( 18 < result && result < 33 ) {//18以上33未満//中吉
            omikuji = com[1];
            omikuji_img = com_img[1];   // ★
        } else if( 33 < result && result < 48 ) {//33以上48未満//小吉
            omikuji = com[2];
            omikuji_img = com_img[2];   // ★
        } else if( 48 < result && result < 58 ) {//48以上58未満//吉
            omikuji = com[3];
            omikuji_img = com_img[3];   // ★
        } else if( 58 < result && result < 68 ) {//58以上68未満//半吉
            omikuji = com[4];
            omikuji_img = com_img[4];   // ★
        } else if( 68 < result && result < 76 ) {//68以上76未満//末吉
            omikuji = com[5];
            omikuji_img = com_img[5];   // ★
        } else if( 76 < result && result < 84 ) {//76以上84未満//末小吉
            omikuji = com[6];
            omikuji_img = com_img[6];   // ★
        } else if( 76 < result && result < 90 ) {//84以上90未満//凶
            omikuji = com[7];
            omikuji_img = com_img[7];   // ★
        } else if( 90 < result && result < 94 ) {//90以上94未満//小凶
            omikuji = com[8];
            omikuji_img = com_img[8];   // ★
        } else if( 94 < result && result < 97 ) {//94以上97未満//半凶
            omikuji = com[9];
            omikuji_img = com_img[9];   // ★
        } else if( 97 < result && result < 99 ) {//97以上99未満//末凶
            omikuji = com[10];
            omikuji_img = com_img[10];  // ★
        } else {//99以上100//大凶
            omikuji = com[11];
            omikuji_img = com_img[11];  // ★
        }
        
        
        $("#getFortune").addClass('after').fadeOut(2000);
        $("#result").delay(2000).fadeIn(2000);
        $("#result tr .no span").text(result);
//      $("#result tr .result").text(omikuji);
        $("#result tr .result").html('<img src="' + omikuji_img + '">');    // ★


    });
});

用意する画像をそのまま HTML に差し込んでいます。
画像の大きさによっては、スタイルシートで大きさを調整する必要があります。

画像のファイル名を通し番号にしたりとかすると、もっと短く書けるような気もしますが、元のソースを活かしてあります。
追加したところには、コメントで「★」を入れてあります。
元のソースの文字列の部分は、(必要ないけど)残してありますので、動作を確認したら消しちゃってください。

他2件のコメントを見る
id:a-kuma3

そういったことも踏まえて、ぼくならこう書くと思います。

    function get_display_data(num) {
        var data = [
            [ 18  , '大吉'   , '/result_dai_kichi.jpg',    ],
            [ 33  , '中吉'   , '/result_chu_kichi.jpg',    ],
            [ 48  , '小吉'   , '/result_sho_kichi.jpg',    ],
            [ 58  , '吉'     , '/result_kichi.jpg',        ],
            [ 68  , '半吉'   , '/result_han_kichi.jpg',    ],
            [ 76  , '末吉'   , '/result_sue_kichi.jpg',    ],
            [ 76  , '末小吉' , '/result_suesho_kichi.jpg', ],
            [ 90  , '凶'     , '/result_kyo.jpg',          ],
            [ 94  , '小凶'   , '/result_sho_kyo.jpg',      ],
            [ 97  , '半凶'   , '/result_han_kyo.jpg',      ],
            [ 99  , '末凶'   , '/result_sue_kyo.jpg',      ],
            [ 999 , '大凶'   , '/result_dai_kyo.jpg',      ],
        ];

        for (i = 0 ; i < data.length ; ++i) {
            if (num < data[i][0]) {
                return data[i];
            }
        }

        // ここには来ないはず
        alert("ERROR !!!");
        return null;
    }


    /* 0から100の範囲 */
    var result = Math.floor( Math.random() * 100 );
    
    var data = get_display_data(result);

    var omikuji = data[1];
    var omikuji_img = data[2];

    ...

書き方はいろいろとありますが、意識していることは

  • データを配列で持つこと
  • 関数にすること

です。

データを配列で持つことによって、判定の境界値を間違うこと(以下と未満の取り違えとか)はあっても、歯抜けになるようなミスは起こりえません。

関数にすることのメリットは、テストができることです。
例えば、

    // test
    for (ii = 0 ; ii < 100 ; ++ii) {
        console.log(ii, get_display_data(ii));
    }

こんな感じで、乱数で発生させる 0 から 99 を全て渡して、その結果を確認してみる。

# 蛇足でした :-)

2016/12/23 21:28:01
id:yato12

新設丁寧にアドバイス有難うございます。
勉強になりました。

2016/12/26 11:58:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません