循环中的JavaScript计时器弹出窗口

Question

Demo

我是JavaScript的新手，所以请原谅。

这是HTML部分。当我尝试'恢复'时，计时器不起作用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="period" onchange="start()">
    <option value="0">Select time required</option>
    <option value="30">30 Seconds</option>
    <option value="60">1 Minute</option>
    <option value="300">5 Minutes</option>
    <option value="900">15 minutes</option>
    <option value="1800">30 minutes</option>
    <option value="2700">45 minutes</option>
    <option value="3600">60 minutes</option>
    <option value="4500">75 minutes</option>
    <option value="5400">90 minutes</option>
    <option value="6300">105 minutes</option>
    <option value="7200">120 minutes</option>
</select>   <span id="countdown" style="font-weight: bold;"></span>
<br>
<br>
<input type="button" value="Pause" onclick="stopwatch(this);" />

这是JavaScript。我想让它做一个弹出窗口，但是当我尝试这样做时，弹出窗口会无限循环。我想我可能搞砸了if语句。

var timeInSecs;
var ticker;
var start_time;
function Countdown(start) {
    this.start_time = start === undefined ? "1:00" : start ;
    this.target_id = "#timer";
    this.name = "timer";
    start_time = this.start_time;
}

Countdown.prototype.init = function () {
    this.reset();
    ticker = setInterval(this.name + '.tick()', 1000);
}

Countdown.prototype.reset = function () {
    time = this.start_time.split(":");
    this.minutes = parseInt(time[0]);
    this.seconds = parseInt(time[1]);
    this.update_target();
}

Countdown.prototype.tick = function () {
    if (this.seconds > 0 || this.minutes > 0) {
        if (this.seconds == 0) {
            this.minutes = this.minutes - 1;
            this.seconds = 59
        } else {
            this.seconds = this.seconds - 1;
        }
    }
    this.update_target()
}

Countdown.prototype.update_target = function () {
    seconds = this.seconds;
    if (seconds < 10) seconds = "0" + seconds;
    $(this.target_id).val(this.minutes + ":" + seconds)
}


var timer = new Countdown();
timer.init();


function start() {
    var s = document.getElementById("period").value;
    document.getElementById("period").disabled = true;
    startTimer(s);
}

function startTimer(secs) {
    timeInSecs = parseInt(secs);
    document.getElementById("countdown").style.color = "black";
    clearInterval(ticker);

    ticker = setInterval("tick()", 1000);
    tick(); // to start counter display right away
}

function tick() {
    var secs = timeInSecs;
    if (secs > 0) {
        timeInSecs--;
        showTime(secs);
    } else {
    alert("sorry, out of time. this won't stop looping")
        timeInSecs--;
        document.getElementById("countdown").style.color = "red";
        document.getElementById("countdown").innerHTML = "You have exceeded your time by " + (hhmmss(Math.abs(timeInSecs)));
        document.getElementById("period").disabled = false;
    }
}

function showTime(secs) {
    var hours = Math.floor(secs / 3600);
    secs %= 3600;
    var mins = Math.floor(secs / 60);
    secs %= 60;
    var result = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
    document.getElementById("countdown").innerHTML = result;
}

function stopwatch(btn) {
    if (btn.value == "Pause") {
        clearInterval(ticker);
        btn.value = "Resume";
    } else {
        btn.value = "Pause"
        var timer = new Countdown($('#timer').val());
        timer.init();
    }
}

function hhmmss(secs) {
    var hrs = Math.floor(secs / 3600);
    var mns = Math.floor(secs / 60) % 60;
    secs = secs % 60;
    if (hrs < 10) hrs = "0" + hrs;
    if (mns < 10) mns = "0" + mns;
    if (secs < 10) secs = "0" + secs;
    return mns + " minutes " + secs + " seconds";
}