0

私はJavaScriptが初めてで、サイコロのロールをシミュレートするためにこのループを作成しようとしています。ロールをクリックすると、どの画像も更新されず、壊れた画像が表示されて終了します。誰でも私のエラーがどこにあるかを見ることができますか?

    function roll(){
        for(x=0;x<10;x++){ 
            var die_num1 = Math.ceil(Math.random()*6);
            for(y=0;y<20;y++){
                var picturetype1 = Math.ceil(Math.random()*3);
                if (picturetype1 == 1){prefix1 = "die-";}
                if (picturetype1 == 2){prefix1 = "dicet-";}
                if (picturetype1 == 3){prefix1 = "dices-";}
                document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
            }
        } 
    }

体：

    <input type ="button" value = "Roll" onclick="roll()" >
    <img name="dice" id="dice" src="http://localhost/CodeIgniter_2.1.2/dice/die-1.gif" >

を使用しdocument.writeて、少なくとも最終的な画像がフォルダーに存在することを確認しました。ただし、ループが進行するにつれて画像が循環することを期待しています。繰り返しますが、私は JavaScript の経験がなく、どのように見えるべきかを考えてこれをまとめました。どんな助けでも大歓迎です。ここにコードを入力してください

4

2 に答える 2

0

私を正しい方向に向けてくれてありがとう。Michaelが提案したように、setTimeoutを使用するようにこれを作り直しましたが、うまく機能しています。反復ごとに必要なのは1/10秒だけで、それほど多くはありませんが、すべての違いがありました。

function roll2(){
    var timer = setTimeout ("roll2();", 100);
    i++;
    if(i >= 15) clearTimeout(timer);
    var die_num1 = Math.ceil(Math.random()*6);
    var picturetype1 = Math.ceil(Math.random()*3);
    if (picturetype1 == 1){prefix1 = "die-";}
    if (picturetype1 == 2){prefix1 = "dicet-";}
    if (picturetype1 == 3){prefix1 = "dices-";}
    if (i <=15) {
        document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/' + prefix1 + die_num1 + '.gif';
    }
    if (i >=15) {
        document.getElementById("dice").src='http://localhost/CodeIgniter_2.1.2/dice/die-' + die_num1 + '.gif';
        i=0;
    }
}
于 2012-11-22T09:21:49.637 に答える
0

あなたがあなたから戻る前に画面を更新することを考えても、ブラウザがイベント駆動型の環境であるとは思いませんroll()。setTimeout一連のタイマー イベントとして理解して処理する必要があります。

于 2012-11-21T08:41:02.843 に答える