2016-11-14 80 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" />