setTimeout我無法再次啓動該功能

我是JavaScript新用戶。在redPic.onclick我想重置超時，然後再次啓動它。我不想使用jQuery。可能嗎？setTimeout我無法再次啓動該功能

let redPic = document.createElement('img'); 
redPic.src = "610f326c4fa418d6221909abdb8c67a824837df3f7397b840d9a3376.png"; 
redPic.width = "90"; 

function putPicOnRandomPlace() { 
    let showRedPic = document.getElementById(Math.floor(Math.random() * 9) + 1); 
    showRedPic.appendChild(redPic); 
} 

putPicOnRandomPlace(); 
let timeOut = setTimeout(function() { 
    alert('game over!'); 

}, 3000) 

redPic.onclick = function() { 
    putPicOnRandomPlace(); 

    clearTimeout(timeOut); 

    timeOut = setTimeout(function() { 
    alert('game over!'); 

    }, 3000) 
}

來源

2017-10-05 Svetlozar

您鏈接的圖像似乎不存在。 showRedPic看起來像它抓住了一些我們需要看到的幫助你的html。 –

看起來像一個*** whack-a-mole ***遊戲 –

是的，只需要調用的setTimeout再次：

let endGame = function() { alert('game over!'); }; 
let timeOut = setTimeout(endGame, 3000); 

redPic.onclick = function() { 
    putPicOnRandomPlace(); 
    clearTimeout(timeOut); 
    timeOut = setTimeout(endGame, 3000); 
};

來源

2017-10-05 06:29:32 Thayne

希望這有助於：

let redPic = document.createElement('img'); 
 
redPic.src = "https://yt3.ggpht.com/-VU845Dzzu-w/AAAAAAAAAAI/AAAAAAAAAAA/55Lhvq94LfI/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"; 
 
redPic.width = 60; 
 
redPic.height = 60 
 

 
let gameover = function() { alert(`Game Over!`); updatePoints(0); points = 0; } 
 
let prevNum; 
 
function putPicOnRandomPlace() { 
 
    let showRedPic = document.getElementById(randomNumber()); 
 
    showRedPic.appendChild(redPic); 
 
} 
 

 
function updatePoints(pts) { 
 
    document.getElementById('pts').innerHTML = pts; 
 
} 
 
let points = 0; 
 
randomNumber = function() { 
 
    let newNum = Math.floor(Math.random() * 9) + 1; 
 
    if(newNum !== prevNum) { 
 
     prevNum = newNum; 
 
     return newNum; 
 
    } 
 
    else 
 
     return randomNumber(); 
 
} 
 

 
putPicOnRandomPlace(); 
 
let timeOut = setTimeout(gameover, 3000); 
 

 
redPic.onclick = function() { 
 
    points++; 
 
    updatePoints(points); 
 
    putPicOnRandomPlace(); 
 

 
    clearTimeout(timeOut); 
 

 
    timeOut = setTimeout(gameover, 3000) 
 
}

.board { 
 
    float: left; 
 
    border: 5px solid black; 
 
    max-width: 180px; 
 
    clear: both; 
 
} 
 

 
.tile { 
 
    width: 58px; 
 
    height: 58px; 
 
    float: left; 
 
    background-color: grey; 
 
    margin: 0; 
 
    border: 1px solid white 
 
}

<div class="board"> 
 
    <div id="1" class="tile"></div> 
 
    <div id="2" class="tile"></div> 
 
    <div id="3" class="tile"></div> 
 
    <div id="4" class="tile"></div> 
 
    <div id="5" class="tile"></div> 
 
    <div id="6" class="tile"></div> 
 
    <div id="7" class="tile"></div> 
 
    <div id="8" class="tile"></div> 
 
    <div id="9" class="tile"></div> 
 
</div> 
 
<div style="clear: both;">Points: <span id="pts">0</span></div>

編輯：

我添加了一個邏輯，不重複圖像的相同位置。還增加了點數更新功能。

來源

2017-10-05 08:36:08

setTimeout我無法再次啓動該功能

回答

相關問題