試圖使時鍾功能點擊

Question

並感謝您的光臨。

我一直在嘗試向正在處理的項目中添加功能部件或功能，但是我無法將其包裹住。

當我加載項目時，我希望用戶在移動或單擊其中一個球體時立即激活時間，而不是在項目加載時立即激活。 我知道有一個onClick或click事件，但是我無法在js代碼上實現它。 我已經將所有功能注釋掉或“灰化了”，以進行測試。

以下是一些時間代碼：

function clockStart() {
    numberOfSecs = setInterval(function () {
        seconds.text(`${second}`)
        second = second + 1
    }, 1000);
}

function rewindSec(seconds) {
    if (seconds) {
        clearInterval(seconds);
    }
}

gameStart();

// GAMES BEGIN!!!
function gameStart() {
    var cards = shuffle(listOfCards);
    deckOfCards.empty();
    match = 0;
    Moves = 0;
    moveNum.text("0");
    ratingStars.removeClass("fa-angry").addClass("fa-star");
    for (var i = 0; i < cards.length; i++) {
        deckOfCards.append($('<li class="card"><i class="fab fa-' + cards[i] + '"></i></li>'))
    }
    sourceCard();

    rewindSec(numberOfSecs);
    second = 0;
    seconds.text(`${second}`)
    clockStart();
};

這是我正在談論的項目的鏈接：

完整頁面查看： https ： //codepen.io/idSolomon/full/RYPZNp/

編輯器視圖： https : //codepen.io/idSolomon/pen/RYPZNp/?editors=0010

警告：項目不適合移動設備。 至少還沒有。

如果有人可以幫我解決這個問題，那么一千個謝謝。

謝謝！

Answer 1

您可以更改在其他位置啟動時鍾的事件

首先從gameStart（）方法中刪除clockStart（）函數

seconds.text(`${second}`)
//clockStart();

如果添加了Extra變量以檢測時鍾是否啟動

var isClockStarted=false;

單擊卡時，以下代碼將啟動計時器：

var sourceCard = function () {

deckOfCards.find(".card").bind("click", function () {
if(!isClockStarted)
clockStart();

波紋管代碼將檢查計時器是否啟動。

function clockStart() {
if(!isClockStarted){
    isClockStarted=true;
numberOfSecs = setInterval(function () {
    seconds.text(`${second}`)
    second = second + 1
}, 1000);

}}

我發現即使游戲結束，您也不會停止計時器

如果取消游戲，它將再次啟動計時器// toCheck