如何在某些圖像上使用setTimeout函數？

我正在用javascript創建一個遊戲，它從六個模糊圖像開始，一旦圖像被選中，它就會顯示未被模糊的圖像。我想要將未模糊的圖像顯示2秒鐘，然後需要返回模糊的圖像。如何在某些圖像上使用setTimeout函數？

我的代碼工作正常，但是當我試圖創建一個setTimeout函數的圖像不再改變。我試圖創建它作爲一個數組，並有時間在最後，但它沒有工作。我也嘗試在showpicture函數的末尾放置一段時間，但它再次無法工作。有人可以幫助我創建setTimeout函數。

我的工作代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<title> Who Am I? </title> 

<script type="text/javascript"> 

     var imageone = document.getElementById("Zero"); 
     var imagetwo = document.getElementById("One"); 
     var imagethree = document.getElementById("Two"); 
     var imagefour = document.getElementById("Three"); 
     var imagefive = document.getElementById("Four"); 
     var imagesix = document.getElementById("Five"); 

     function init() { 
     init1(); 
     init2(); 
     init3(); 
     init4(); 
     init5(); 
     init6(); 
     }; 

     function init1() { 
     var imageone = document.getElementById("Zero"); 
     imageone.onclick = showAnswerone; 
     } 

     function init2() { 
     var imagetwo = document.getElementById("One"); 
     imagetwo.onclick = showAnswertwo; 
     } 

     function init3() { 
     var imagethree = document.getElementById("Two"); 
     imagethree.onclick = showAnswerthree; 
     } 

     function init4() { 
     var imagefour = document.getElementById("Three"); 
     imagefour.onclick = showAnswerfour; 
     } 

     function init5() { 
     var imagefive = document.getElementById("Four"); 
     imagefive.onclick = showAnswerfive; 
     } 

     function init6() { 
     var imagesix = document.getElementById("Five"); 
     imagesix.onclick = showAnswersix; 
     } 


     window.onload = init; 

     function showAnswerone() { 
     var imageone = document.getElementById("Zero"); 
     init1(); 
     imageone.src="Zero.jpg"; 
     } 

     function showAnswertwo() { 
     var imagetwo = document.getElementById("One"); 
     init2(); 
     imagetwo.src="One.jpg"; 
     } 


     function showAnswerthree() { 
     var imagethree = document.getElementById("Two"); 
     init3(); 
     imagethree.src="Two.jpg"; 
     } 


     function showAnswerfour() { 
     var imagefour = document.getElementById("Three"); 
     init4(); 
     imagefour.src="Three.jpg"; 
     } 

     function showAnswerfive() { 
     var imagefive = document.getElementById("Four"); 
     imagefive.src="Four.jpg"; 
     } 

     function showAnswersix() { 
     var imagesix = document.getElementById("Five"); 
     init5(); 
     imagesix.src="Five.jpg"; 
     } 

     function submitForm() 
     { 
     var var_one = 0, var_two = 0, var_three = 0; 
     var var_four = 0, var_five = 0, var_six = 0; 
     } 

     function var_oneb(){ 
      var_one=5; 
      return true; 
     } 

     function var_onea(){ 
      var_one=0; 
      return true; 
     } 

     function var_twob(){ 
      var_two=5; 
      return true; 
     } 
     function var_twoa(){ 
      var_two=0; 
      return true; 
     } 

     function var_threeb(){ 
      var_three=5; 
      return true; 
     } 

     function var_threea(){ 
      var_three=0; 
      return true; 
     } 


     function var_fourb(){ 
      var_four=5; 
      return true; 
     } 

     function var_foura(){ 
     var_four=0; 
     return true; 
     } 


     function var_fiveb(){ 
      var_five=5; 
      return true; 
     } 

     function var_fivea(){ 
      var_five=0; 
      return true; 
     } 

     function var_sixb(){ 
      var_six=5; 
      return true; 
     } 

     function var_sixa(){ 
      var_six=0; 
      return true; 
     } 


     function results_addition() { 
     var var_results=var_one+var_two+var_three+var_four+var_five+var_six; 
     if(var_results<=29){ 
      document.getElementById('choice1').value="Not all answers are correct"; 
     } 
     else{ 
     if(var_results>=30){ 
     document.getElementById('choice1').value="All answers are correct"; 
     } 
     else{ 
     document.getElementById('choice1').value="All answers are correct"; 
     } 
     } 
     } 

</script> 

<style> 
    body { 
    background-color: #ff0000; 
    } 

    div#grid { 
     position: relative; 
     width: 500px; 
     height: 300px; 
     margin-left: 50; 
     margin-right: 50; 
    } 

    table { 
     border-spacing: 0px; 
     position: absolute; 
     left: 40px; 
     top: 40px; 
     border-collapse: collapse; 
     padding: 0px; 
     margin: 0px; 
    } 

    td { 
     border: 1px solid white; 
     text-align: center; 
     width: 160px; 
     height: 110px; 
     vertical-align: middle; 
     align-content: stretch; 
     padding: 5px; 
     margin: 0px; 
    } 

    h2 { 
     font-family: verdana, arial; 
     text-align: center; 
     color: white; 
     font-size: 30px; 
    } 

    h3 { 
     font-family: verdana, arial; 
     text-align: center; 
     color: white; 
     font-size: 18px; 
    } 
</style> 
</head> 

<body> 
    <div id="grid"> 
    <h2> Who Am I? </h2> 
    <table> 
    <tr> 
    <td> <img id = "Zero" src = "Zeroblur.jpg"> </td> 
    <td> <img id = "One" src = "Oneblur.jpg"> </td> 
    <td> <img id = "Two" src = "Twoblur.jpg"> </td> 
    </tr> 
    <tr> 
    <td> <img id = "Three" src = "Threeblur.jpg"> </td> 
    <td> <img id = "Four" src = "Fourblur.jpg"> </td> 
    <td> <img id = "Five" src = "Fiveblur.jpg"> </td> 
    </tr> 
    </table> 
    </div> 
    <br><br><br><br><br><br><br><br> 
    <h3> I am a Rugby League Player. </h3> 
    <h3> Click on me to reveal my identity! </h3> 
    <br> 
    <h3>Which Player am I</h3> 
    <hr> 
    <form action=""> 
    <h3>Player 1 </h3> 
<center> 
    <h3> 
    Shaun Johnson <INPUT TYPE="radio" NAME="Ra1" VALUE="0" onclick="var_onea()"> 
    Sonny Bill Williams <INPUT TYPE="radio" NAME="Ra1" VALUE="5" onclick="var_oneb()"> 
    </h3> 
</center> 
    <br> 
    <hr> 

    <h3>Player 2 </h3> 
<center> 
    <h3> 
    Gareth Widdop <INPUT TYPE="radio" NAME="Ra2" VALUE="0" onclick="var_twoa()"> 
    Sam Tomkins <INPUT TYPE="radio" NAME="Ra2" VALUE="5" onclick="var_twob()"> 
    </h3> 
</center> 
    <br> 
    <hr> 

    <h3>Player 3 </h3> 
<center> 
    <h3> 
    James Graham <INPUT TYPE="radio" NAME="Ra3" VALUE="5" onclick="var_threea()"> 
    Sam Burgess <INPUT TYPE="radio" NAME="Ra3" VALUE="10" onclick="var_threeb()"> 
    </h3> 
</center> 
    <br> 
    <hr> 

    <h3>Player 4 </h3> 
<center> 
    <h3> 
    Matthew Scott <INPUT TYPE="radio" NAME="Ra4" VALUE="5" onclick="var_foura()"> 
    Johnathon Thurston <INPUT TYPE="radio" NAME="Ra4" VALUE="10" onclick="var_fourb()"> 
    </h3> 
</center> 
    <br> 
    <hr> 

    <h3>Player 5 </h3> 
<center> 
    <h3> 
    Neil Lowe <INPUT TYPE="radio" NAME="Ra5" VALUE="5" onclick="var_fivea()"> 
    Danny Brough <INPUT TYPE="radio" NAME="Ra5" VALUE="10" onclick="var_fiveb()"> 
    </h3> 
</center> 
    <br> 
    <hr> 

    <h3>Player 6 </h3> 
<center> 
    <h3> 
    Mitch Garbutt <INPUT TYPE="radio" NAME="Ra6" VALUE="5" onclick="var_sixa()"> 
    Ryan Hall <INPUT TYPE="radio" NAME="Ra6" VALUE="10" onclick="var_sixb()"> 
    </h3> 
</center> 
    <br> 
    <hr> 
    <br> 
<center> 
    <INPUT TYPE="button" VALUE="Calculate" onclick="results_addition()"> Your Score: 
    <INPUT TYPE="text" id="choice1" NAME="choice1" VALUE="" SIZE=30> 
</center> 
</form> 
</body> 
</html>

來源

2016-03-15 M. Harrison

這將是更好張貼不工作 – baao

正是你想在什麼'的setTimeout已經線程代碼'？你的代碼有點亂，無法真正猜到你想要達到什麼目的。 –

我想要顯示未混淆的圖像2秒鐘。我新來javascript。未被模糊的圖像是（零，一，二，三，四，五，六）模糊的圖像在每個Zeroblur，Oneblur等的末端都有模糊。 –

要顯示不模糊的圖像，然後（在本例爲四個）切換回所述模糊那些使用此：

function showAnswerfive() { 
    var imagefive = document.getElementById("Four"); 
    imagefive.src="Four.jpg"; 
    setTimeout (function() { 
     imagefive.src="Fourblur.jpg"; 
    },2000); 
}

編輯：

此外，您可以優化這些功能，基本上塊下降到一個功能，並像這樣存儲圖片：

個

JS：

function showAnswerById (id) { 
    var imagefive = document.getElementById(id); 
    var blurredImage = imagefive.getAttribute("blurred-src"); 
    var unBlurredImage = imagefive.getAttribute("unblurred-src"); 
    imagefive.src=unBlurredImage; 
    setTimeout (function() { 
     imagefive.src=blurredImage ; 
    },2000); 
}

HTML：

<img id="Zero" blurred-src="Zeroblur.jpg" unblurred-src="Zero.jpg" src="Zeroblur.jpg">

來源

2016-03-15 14:30:53

感謝:) –

我的榮幸，也檢查了我的編輯，我建議編輯，你的代碼會得到很多更清潔！ –

好的謝謝:)它的工作方式正是我計劃好的。 –

如何在某些圖像上使用setTimeout函數？

回答

相關問題