Question

该程序旨在从数组中删除第一个数字，并检查第二个数字是什么，并显示链接的图像。代码随机停止按下按钮，然后按几下它再次开始工作

.floating-event {
    position: absolute;
    width: 100px;
    height: 200px;
    color: whitesmoke;
    border: solid 0px #dddddd;
    z-index: 100;
}

.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid #dddddd;
    overflow:visible;
    height: 20px;
}

var deck = [1, 2, 3, 4, 5, 6, 7, 8];

function myFunction() {
  deck.sort(function(a, b) {
    return 0.5 - Math.random()
  });
  deck.shift();

  if (deck[0] == "1") {
    document.getElementById("img").src = "https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png";
  } else if (deck[0] == "2") {
    document.getElementById("img").src = "http://www.printablee.com/postpic/2014/08/number-2-printable-coloring-pages_244062.jpg";
  } else if (deck[0] == "3") {
    document.getElementById("img").src = "http://blogs.abc.net.au/.a/6a00e0097e4e688833017eeb4172f2970d-800wi";
  } else if (deck[0] == "4") {
    document.getElementById("img").src = "http://www.clipartkid.com/images/309/blog-numbers-just-numbers-page-2-9bq8wQ-clipart.jpg";
  } else if (deck[0] == "5") {
    document.getElementById("img").src = "https://static1.squarespace.com/static/527cff9fe4b0dc36171a857c/52b21af3e4b07a50584fa6f2/553bd231e4b0bfb591495953/1429983793686/5.png?format=750w";
  } else if (deck[0] == "6") {
    document.getElementById("img").src = "http://www.drodd.com/images15/6-6.jpg";
  } else if (deck[0] == "7") {
    document.getElementById("img").src = "http://www.drodd.com/images15/number7-5.jpg";
  } else if (deck[0] == "8") {
    document.getElementById("img").src = "https://i.ytimg.com/vi/d2fkzKP2A3M/maxresdefault.jpg";
  }
}

Answer 1

不是真的答案，但也许你会发现其中一些有用的东西。

您不需要使用数组，一个随机排序就足够了
除非您要重新生成数组，否则您只需使用网址而不是索引
在您使用第一张图片之前不要移动（），否则它会永远丢失。
也许调整图片大小以适应
您最好添加一个带代码的点击处理程序，以保持表单和功能的分离
避免使用重复else if，switch语句更有效 - 或者您可以使用数据结构本身
src=''在某些浏览器中是非法的，src='//:0'显然是更好的选择

＆＃13;

blank = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
deck = [ "https://pbs.twimg.com/profile_images/2478399688/6gyep59fumb340ima588_400x400.png"
       , "http://www.printablee.com/postpic/2014/08/number-2-printable-coloring-pages_244062.jpg"
       , "http://blogs.abc.net.au/.a/6a00e0097e4e688833017eeb4172f2970d-800wi"
       , "http://www.clipartkid.com/images/309/blog-numbers-just-numbers-page-2-9bq8wQ-clipart.jpg"
       , "https://static1.squarespace.com/static/527cff9fe4b0dc36171a857c/52b21af3e4b07a50584fa6f2/553bd231e4b0bfb591495953/1429983793686/5.png?format=750w"
       , "http://www.drodd.com/images15/6-6.jpg"
       , "http://www.drodd.com/images15/number7-5.jpg"
       , "https://i.ytimg.com/vi/d2fkzKP2A3M/maxresdefault.jpg"
       ].sort( () => 0.5 - Math.random() );

function myFunction() { document.getElementById("img").src = deck.length? deck.shift() : blank; }

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button").addEventListener("click", myFunction, false);
    document.getElementById("img").src = blank;
}
, false);

＆＃13;

<button id="button">Try it</button><br />
<img src="//:0" width="50" height="50" id="img" />

＆＃13;

功能随机不起作用

1 个答案: