Javascript html中没有图像的回音

作为一名教师，我想和我的学生一起画。对于编码，我是一个新手，希望有人能帮助我

在我的网站上，我把图像显示为骰子。学生可以“踩”骰子，并将图像相互连接

我正在寻找一个代码，允许一个图像显示一行只有一次。现在，可能会出现同一图像在一行中显示两倍或三倍的情况

my.html代码（在本例中为“china”）

阿尔德里克斯肯德·多贝尔斯滕·古安。jij welke是不是生了bij Elkar horen？
正文{font-family:'Calibri'，无衬线；字体大小：100%；行高：150%；边距：0；填充：0；颜色：fff；背景色：包装{width:80%；边距：0自动；填充：10px 5%；背景色：内容、内容2、页眉、页眉{文本对齐：左；边框底部：10px实心#333；背景色：#333；}标题左{浮动：左；宽度：70%；}。拱肩{浮动：左；宽度：225px；边框顶部：10px；}横幅{浮动：右；宽度：30%；}adv，#内容{文本对齐：中心；}内容}清晰：两者；背景色：{35px；}{margin top:15px；}adv{margin right:auto；margin left:auto；}content2{margin top:20px；border top:10px solid#333；背景色：#eee；}.content2left、.content2right{width:48%；文本对齐：left；}.content2left{float:left；padding right:2%；}.content2right{float:right:right:right；padding:2%}.clearfix:后面{行高：0；显示：块；可见性：隐藏；清除：两者；高度：0；内容：'.'.}}洗牌按钮，再次洗牌按钮{字体大小：110%；字体重量：400；宽度：200px；高度：50px；填充：1px；颜色：fff；光标：指针；边框：无；边框半径：10px；背景色：ff7d01；}选择{margin right:20px；}语言{float:right；height:50px；}语言{margin right:5px；}骰子{margin:10px；边框半径：50px；}骰子{位置：相对；宽度：150px；高度：150px；边框：200px；}结果{位置：绝对；顶部：0；宽度：0；高度：0；文本对齐：中心；}预设{margin margin{边距：0px；填充：0px；边框：无；}ul{文本装饰：无；}h1{字体大小：3.5em；字体重量：700；颜色：ff7d01；}h2{字体大小：2em；字体重量：400；行高：120%；边距：15px 0 5px；颜色：000；}。总计{字体大小：0；文本装饰：下划线；颜色：333 h3{font size:1.5em；font-weight:700；margin:10px 0；}p{font-size:100%；color:333；}a{text-decoration:underline；color:222；}a:访问的{text-decoration:none；}@media-screen和（最大宽度：767px）{.quickrole{display:none；}h1{font-size:2em；}h2 font-size:1.4em；行高：120%；margin:15px:5px；}.selectiondice{width:100%；}选择{height:30px；margin right:100px；margin bottom:10px；}洗牌按钮{width:100%；margin:10px 0；}。DiceMg{width:25%；height:25%；}。content2left，.content2right{width:100%；}。Spundice{宽度：100%；margin top:10px；}媒体屏幕和（最大宽度：1024px）{{宽度：90%；填充：05%；}#横幅，#标题左侧{浮动：左侧；宽度：100%；}
阿尔德里克斯肯德·多贝尔斯滕
古伊·斯内尔·米德尔·阿德里克·斯肯迪奇·多贝尔斯滕
安塔尔普拉特耶斯：
1.
2.
3.
4.
5.
6.
安塔尔·弗斯奇伦德·普拉特杰斯：
2.
3.
4.
5.
6.
7.
8.
9
好！

好啊！

附加Javascript

$(function() {
    function n() {
        for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) {
            var i = 1 + Math.floor(Math.random() * e);
            o += i, n += "<img class='diceimg' width='400' height='400' src='/china/dice" + i + ".png' alt='Aardrijkskunde Dobbel" + i + "' />"
            }    

        n += "<h2 class='total'>+  " + o + "  +  </h2>", $("#content").html(n), $("#content img").hide().each(function(n) {
            $(this).delay(25 * n).show(100)
        })
    }
    $(document).keypress(function(t) {  
        (13 == t.which || 32 == t.which) && n()
    }), $("#shuffle_button").click(function() {
        n()
    }), $("#shuffle_button_again").click(function() {
        n()
    }), n()
});

$（函数（）{
函数n（）{
对于（var n=），t=parseInt（$（“#dropdown_met_plaatjes”）.val（）），e=parseInt（$（“#dropdown_met_plaatjes”）.val（）），o=12，a=0；t>a；a++）{
变量i=1+Math.floor（Math.random（）*e）；
o+=i，n+=
}    
n+=“+”+o+“+”，$（“#内容”）.html（n），$（“#内容img”）.hide（）.each（函数（n）{
$（此）.delay（25*n）.show（100）
})
}
$（文档）.keypress（函数（t）{
（13==t.which | 32==t.which）和&n（）
})，$（“#洗牌按钮”）。单击（函数（）{
n（）
})，$（“#再次洗牌按钮”）。单击（函数（）{
n（）
})，n（）
});

我想听听你的意见

---

Erik Meerveld

一种方法是将“滚动”图像存储在一个数组中，如果已经拾取图像，可以使用该数组查找并重新滚动图像：

    var selectedImages = []; //list of previously rolled images.
    for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) {
        var i = 1 + Math.floor(Math.random() * e);

        //while the array isn't empty (the first loop iteration)
        //and value of i isn't already in the array, re-roll.
        while (selectedImages.length != 0 && selectedImages.indexOf(i) != -1) { 
          i = 1 + Math.floor(Math.random() * e); 
        }
        selectedImages.push(i); //add to array so it doesn't get selected again.
      // ... rest of your code follows

也可以考虑使用更多的描述性变量名，而不是一个字符名。这将使您（和其他人）在将来保持更容易。

---

还有另一种方法，也使用数组存储已滚动的数字，如果匹配，则重新运行：

$(function() {
    function n() {
    var testArray = [];
        for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) {
            var i = 1 + Math.floor(Math.random() * e);
            if ($.inArray(i,testArray) === -1) {
            o += i, n += "<img class='diceimg' width='400' height='400' src='/china/dice" + i + ".png' alt='Aardrijkskunde Dobbel" + i + "' />"
            testArray[a] = i;
            } else {
            a--;
            }  
            }
        n += "<h2 class='total'>+  " + o + "  +  </h2>", $("#content").html(n), $("#content img").hide().each(function(n) {
            $(this).delay(25 * n).show(100)
        })
console.log(testArray);
    }
    $(document).keypress(function(t) {  
        (13 == t.which || 32 == t.which) && n()
    }), $("#shuffle_button").click(function() {
        n()
    }), $("#shuffle_button_again").click(function() {
        n()
    }), n()
});

$（函数（）{
函数n（）{
var testArray=[]；
对于（var n=），t=parseInt（$（“#dropdown_met_plaatjes”）.val（）），e=parseInt（$（“#dropdown_met_plaatjes”）.val（）），o=12，a=0；t>a；a++）{
变量i=1+Math.floor（Math.random（）*e）；
if（$.inArray（i，testArray）=-1）{
o+=i，n+=
testArray[a]=i；
}否则{
a——；
}  
}
n+=“+”+o+“+”，$（“#内容”）.html（n），$（“#内容img”）.hide（）.each（函数（n）{
$（此）.delay（25*n）.show（100）
})
控制台日志（testArray）；
}
$（文档）.keypress（函数（t）{
（13==t.which | 32==t.which）和&n（）
})，$（“#洗牌按钮”）。单击（函数（）{
n（）
})，$（“#再次洗牌按钮”）。单击（功能(
$(function() {
    function n() {
    var testArray = [];
        for (var n = "", t = parseInt($("#dropdown_met_aantal_plaatjes").val()), e = parseInt($("#dropdown_met_aantal_verschillende_plaatjes").val()), o = 12, a = 0; t > a; a++) {
            var i = 1 + Math.floor(Math.random() * e);
            if ($.inArray(i,testArray) === -1) {
            o += i, n += "<img class='diceimg' width='400' height='400' src='/china/dice" + i + ".png' alt='Aardrijkskunde Dobbel" + i + "' />"
            testArray[a] = i;
            } else {
            a--;
            }  
            }
        n += "<h2 class='total'>+  " + o + "  +  </h2>", $("#content").html(n), $("#content img").hide().each(function(n) {
            $(this).delay(25 * n).show(100)
        })
console.log(testArray);
    }
    $(document).keypress(function(t) {  
        (13 == t.which || 32 == t.which) && n()
    }), $("#shuffle_button").click(function() {
        n()
    }), $("#shuffle_button_again").click(function() {
        n()
    }), n()
});