html中沒有圖像的回聲

作爲一名教師，我想與學生一起處理圖片。對於編碼我是一個新手，並希望有人能夠幫助我。html中沒有圖像的回聲

在我的網站上，我將圖像顯示爲骰子。學生可以'扯'骰子並將圖像與海誓山盟聯繫起來。 http://meerveldfotografie.nl/ak/dobbelsteen.html

我正在尋找一個代碼，允許圖像只顯示一次連續。現在可能會出現同一圖像連續出現兩次或三次。

我的.html代碼（在這個例子中 '中國'）

<!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() 
});

希望從你的來信。

埃裏克Meerveld

來源

2016-10-30 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

而且，您可能需要考慮使用更多描述性變量名稱而不是單字符名稱。你（和其他人）將來會更容易維護。

Demo

來源

2016-10-30 00:25:57 xorspark

它lookslike這會工作。這是我正在尋找的。非常感謝。 –

這裏的另一種方法，也是使用數組來存儲已推出數，然後重新運行，如果他們匹配：

$(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() 
});

來源

2016-10-30 00:33:20 junkfoodjunkie

html中沒有圖像的回聲

回答

相關問題