2016-11-14 53 views
-2

该程序旨在从数组中删除第一个数字,并检查第二个数字是否与第二个数字相同,并显示链接的图像。代码随机停止工作的按钮按下,然后按夫妻后,开始不是真的再次合作函数随机不起作用

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"; 
 
    } 
 
}
<button onclick="myFunction()">Try it</button> 
 
<img src="" id="img" />

+0

应该做什么? – Tibrogargan

+0

你知道'shift'从数组中删除一个元素吗?如果'deck'数组是空的,会发生什么? – gus27

+0

@ gus27它的意思是被删除只是没有放在if语句中,如果它为空 – DeadPixle

回答

0

的答案,但也许你会发现其中的一些有用的东西。

  • 你并不需要求助于数组,一个随机排序是足够
  • 除非你要重新生成阵列,你可以使用的URL,而不是指标
  • 不要转移的(),然后再使用第一张图片,否则它会永远丢失。
  • 也许调整图片以适应
  • 你最好不要添加与代码中的点击处理程序保存
  • 避免使用重复else if形式和功能的分立,switch语句是更有效的 - 或者你可以使用数据结构本身
  • src=''是在某些浏览器是非法的,src='//:0'显然是一个更好的选择

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);
<button id="button">Try it</button><br /> 
 
<img src="//:0" width="50" height="50" id="img" />