试图使时钟功能点击

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