Когда я нажимаю на фигуру, чтобы узнать время спустя, она не будет отображать минуты после нажатия на фигуру менее минуты

Question

// Я играю в тестера реакции, где, если вы нажмете на фигуру, она покажет, сколько времени вам понадобилось, чтобы нажать на эту фигуру.Кажется, все работает нормально, за исключением одной проблемы: если щелкнуть фигуру через 67 секунд, она скажет «1 минута 7 секунд», а затем щелкнет мышью по фигуре через 26 секунд, она скажет «26 секунд», но еслиодин щелчок по нему через 71 секунду, он скажет «11 секунд», а не «1 минута 11 секунд», как следует.Я вставляю весь код, который есть в моем теге скрипта. Нажмите эту ссылку, чтобы увидеть первое изображение, показывающее, как оно выглядит после ожидания 67 секунд, чтобы нажать на него

    var start = new Date().getTime();

    var timeString = "";
    var timings = [];

    function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function makeShapeAppear() {

        var top = Math.floor((Math.random() * (300)));

        var left = Math.floor((Math.random() * (500)));



        // var border = 100 || 0;

        var border = Math.random() < 0.5 ? 100 : 0;

        document.getElementById("shape").style.backgroundColor = getRandomColor();

        document.getElementById("shape").style.top = top + "px";

        document.getElementById("shape").style.left = left + "px";

        document.getElementById("shape").style.display = "block";

        document.getElementById("shape").style.borderRadius = border + "%";

        start = new Date().getTime();

        if (timings.length === 5) {

            document.getElementById("shape").style.display = "none";
            // console.log(Math.min(timings));

        }

        // alert(border);

    }

    function appearAfterDelay() {

        setTimeout(makeShapeAppear, Math.random() * (10000) + 1000);



    }

    appearAfterDelay();

    document.getElementById("shape").onclick = function() {

        document.getElementById("shape").style.display = "none";

        var end = new Date().getTime();

        var timeTaken = (end - start)/1000;

        var timeTakenRound = Math.round((end - start)/1000);

        var minutes = Math.floor(timeTakenRound/60);

        var seconds = Math.floor(timeTakenRound - minutes * 60);

        if (minutes === 1) {
            document.getElementById("minute").innerHTML = minutes + " minute "
        }
        else if (minutes === 0) {
            document.getElementById("minute").style.display = "none";
        }
        else {
            document.getElementById("minute").innerHTML = minutes + " minutes "
        }



        if (seconds === 1) {
            document.getElementById("second").innerHTML = seconds + " second"
        }
        else {
            document.getElementById("second").innerHTML = seconds + " seconds"
        }




        appearAfterDelay();




        timings.push(timeTaken);

        for (var i = 0; i < timings.length; i++) {

            timeString = " " + timings[i] + " seconds,";

            if (timings.length === 5) {
                timeString = " " + timings[i] + " seconds.";

                // appearAfterDelay = false;
            }

            console.log(timings[i]);
        }

        document.getElementById("times").innerHTML += timeString;



        console.log(timeTakenRound);



        console.log(timings.length);

        if (timings.length === 5) {

            var min = Math.min.apply(Math, timings);

            document.getElementById("bestTime").innerHTML = min;


        }
    }