如何根據會議條件彈出圖像

我的問題是：如何根據滿足正確條件彈出圖像。如果發生這種情況，會彈出此圖像，如果發生這種情況，會彈出一個不同的圖像。如何根據會議條件彈出圖像

我無法正常工作。

你會看的代碼是在這裏：

function myMove() 
    { 
     var elemBluefish = document.getElementById("bluefish"); 
     var elemTurtle = document.getElementById("turtle"); 

     var posBluefish = 0; 
     var posTurtle = 0; 

     var id = setInterval(frame, 5); 

    function frame() 
    { 
     if(posBluefish >= 1150 && posTurtle >= 1150) 
     { 
      clearInterval(id); 
      return; 
     } 

     if(posBluefish < 1140) 
     { 
      posBluefish += Math.round(Math.random()*10); 

      if(posBluefish > 1140) 
      { 
       posBluefish = 1140; 
      } 
       elemBluefish.style.left = posBluefish + 'px'; 
     } 

     if(posTurtle < 1140) 
     { 
      posTurtle += Math.round(Math.random()*10); 

      if(posTurtle > 1140) 
      { 
       posTurtle = 1140; 
      } 
       elemTurtle.style.left = posTurtle + 'px'; 
     } 
    } 
    } 

<!DOCTYPE html>

<body> 
     <button onclick="letsRace()">Start!</button> 
     <img id="stoplight" src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg"/> 

    <style> 

     body { 
      overflow: hidden; 
     } 

     #myStoplight { 
      position: absolute; 
      width: 10pc; 
     } 

     #bluefish { 
      position: absolute; 
      top: 31pc; 
      width: 17pc; 
      left: -.5pc; 
     } 

     #turtle { 
      position: absolute; 
      width: 15pc; 
      top: 20pc; 
      left: .5pc; 
     } 

     body { 
      background-image: url("http://www.hpud.org/wp-content/uploads/2015/08/WaterBackground2.jpg") 
     } 

     .finishline { 
      position: absolute; 
      right: -12pc; 
      top: 18pc; 
     } 

     #stoplight{ 
      position:absolute; 
      width:10pc; 
     } 
    </style> 

    <img id="bluefish" src="http://clipartist.net/openclipart.org/2013/July/Blue_Fish_Goldfish.png"> 
    <img id="turtle" src="http://www.clipartkid.com/images/386/turtle-free-stock-photo-illustration-of-a-green-sea-turtle-uPgZrm-clipart.png"> 
    <img src="https://t1.rbxcdn.com/877010da8ce131dfcb3fa6a9b07fea89" class="finishline"> 

    <div id="container"> 
     <div id="animate"></div>

請告訴我發生的事情基本上是兩個圖像都在競相位置1140的隨機時間間隔，因此每次都不會贏。

我希望能夠在烏龜上顯示圖像，並且「烏龜獲勝！」或者藍色魚的圖像和「魚獲勝」，取決於誰首先到達1140。

任何想法？

在此先感謝。

來源

2016-11-09 Alex Imperiale

後的HTML和CSS，請 –

編輯成包括HTML和CSS –

您只需要if語句中的另一個if語句來終止setInterval。這會提醒在完成比賽後贏得的用戶。

來源

2016-11-09 21:49:42

謝謝你的小費！這對於對話框來說是非常棒的，不過，我正在尋找在這個文本框中顯示圖像的方式，可以是烏龜，也可以是魚。我不想說誰贏了，我想把他們的形象放在警戒框中。這可能嗎？ –

該圖像可以在頁面上已經隱藏，但需要顯示何時烏龜或魚獲勝，取決於哪個。 –

我不能做文本，因爲我不得不停下來去某個地方，但我相信你會弄明白的！祝你好運 –

如何根據會議條件彈出圖像

回答

相關問題