作为一名老师，我想和我的学生一起处理图片。对于编码，我是一个新手，希望有人能帮助我。
在我的网站上，我将图像显示为骰子。学生可以“扔”骰子并将图像相互连接起来。 http://meerveldfotografie.nl/ak/dobbelsteen.html
我正在寻找允许图像连续显示一次的代码。现在可能会出现同一图像连续出现两次或三次的情况。
我的 .html 代码(在本例中为“china”)
<!DOCTYPE html>
<html lang="nl"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="index, follow">
<meta name="msvalidate.01" content="23F65DC014C1D0899A8342963C5E810C">
<title>Aardrijkskunde dobbelstenen gooien. Weet jij welke begrippen bij elkaar horen?</title>
<meta property="og:locale" content="nl_NL">
<meta property="og:image" content="http://www.home.deds.nl">
<meta property="og:url" content="htpp://www.home.deds.nl/">
<meta property="og:site_name" content="dobbelsteen">
<style type="text/css">body { font-family : 'Calibri', sans-serif; font-size : 100%; line-height : 150%; margin : 0; padding : 0; color : #fff; background-color : #333; } #wrapper { width : 80%; margin : 0 auto; padding : 10px 5%; background-color : #333; } #adv, #content, #content2, #header, #social { width : 100%; } #header { text-align : left; border-bottom : 10px solid #333; background-color : #333; } #headerleft { float : left; width : 70%; } .spandices { float : left; width : 225px; margin-top : 10px; } #banner { float : right; width : 30%; } #adv, #content, #social { text-align : center; } #content { clear : both; background-color : #333; } #social { margin-top : 15px; } #adv { margin-right : auto; margin-left : auto; } #content2 { margin-top : 20px; border-top : 10px solid #333; background-color : #eee; } .content2left, .content2right { width : 48%; text-align : left; } .content2left { float : left; padding-right : 2%; } .content2right { float : right; padding-left : 2%; } .clearfix:after { line-height : 0; display : block; visibility : hidden; clear : both; height : 0; content : '.'; } #shuffle_button, #shuffle_button_again { font-size : 110%; font-weight : 400; width : 200px; height : 50px; padding : 1px; color : #fff; cursor : pointer; border : none; border-radius : 10px; background-color : #ff7d01; } select { margin-right : 20px; } #language { float : right; height : 50px; } .language { margin-right : 5px; } .diceimg { margin : 10px; border-radius : 50px; } #dice { position : relative; width : 150px; height : 150px; border : 200px; } #result { position : absolute; top : 0; width : 0; height : 0; text-align : center; } .presult { margin : 10px; } img { margin : 0px; padding : 0px; border : none; } ul { text-decoration : none; } h1 { font-size : 3.5em; font-weight : 700; color : #ff7d01; } h2 { font-size : 2em; font-weight : 400; line-height : 120%; margin : 15px 0 5px; color : #000; } .total { font-size : 0; text-decoration : underline; color : #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:visited { text-decoration : none; } @media screen and (max-width:767px) { .quickrole { display : none; } h1 { font-size : 2em; } h2 { font-size : 1.4em; line-height : 120%; margin : 15px 0 5px; } .selectiondice { width : 100%; } select { height : 30px; margin-right : 100px; margin-bottom : 10px; } #shuffle_button { width : 100%; margin : 10px 0; } .diceimg { width : 25%; height : 25%; } .content2left, .content2right { width : 100%; } .spandices { width : 100%; margin-top : 10px; } } @media screen and (max-width:1024px) { #wrapper { width : 90%; padding : 0 5%; } #banner, #headerleft { float : left; width : 100%; } }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" async="" src="http://www.google-analytics.com/plugins/ua/linkid.js"></script><script src="https://pagead2.googlesyndication.com/pub-config/ca-pub-0183057368353561.js"></script><script id="twitter-wjs" src="http://platform.twitter.com/widgets.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" defer=""></script>
<script type="text/javascript" src="roledicechina.min.js" defer=""></script>
</head>
<body style="">
<div id="wrapper">
<div id="header" class="clearfix">
<h1>Aardrijkskunde dobbelstenen</h1>
<h2>Gooi snel meerdere aardrijkskundige dobbelstenen</h2>
Aantal plaatjes: <select id="dropdown_met_aantal_plaatjes">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Aantal verschillende plaatjes: <select id="dropdown_met_aantal_verschillende_plaatjes">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9"selected="selected">9</option>
</select>
<button onclick="ga('send', 'event', 'Dobbelsteen', 'Gooi', 'NL');" id="shuffle_button">Gooi!</button>
<p class="quickrole"><b></b></p>
</div>
</div>
<div id="content"><img class="" width="150" height="150" src="" alt="Online dobbelsteen: 4" style="display: inline;">
<div id="social">
<button id="shuffle_button_again" onclick="ga('send', 'event', 'Dobbelsteen', 'Gooi opnieuw', 'NL');">Gooi opnieuw!</button>
</div>
<div id="content2" class="clearfix">
</div>
</div>
<iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;"></iframe></body></html>
额外的 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()
});
想听听您的意见。
埃里克·梅维尔德
最佳答案
一种方法是将“滚动”的图像存储在一个数组中，如果图像已经被选中，您可以使用它来查找和重新滚动:
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
此外，您可能需要考虑使用更具描述性的变量名称，而不是单字符名称。将来您(和其他任何人)维护起来会容易得多。
关于javascript - html中没有图像回显，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40324887/