Javascript 定时器启动和暂停

我有一个计时器脚本。我不知道如何创建开始按钮。现在，当页面加载时，它会立即启动。暂停按钮也不起作用

这是我为它创作的小提琴

那么，在计时器过期后是否仍可以输出文本，如：

时间到了

由于某些原因，当您按下暂停时，小提琴没有显示“恢复”按钮，但暂停按钮无论如何都不起作用

function stopwatch(btn) {
    if (btn.value == "Pause")  {
        clearInterval(ticker);
        btn.value = "Resume";
    } else {

您可以这样做：

<button onClick="StartTimer()">Start</button>

function StartTimer() {
    //your code here
}

---

代码在JSFIDLE上似乎运行不正常，所以我将其下载到本地机器上。我发现定时器工作，暂停/恢复按钮也工作

我所做的改变：

我从select标记中删除了onchange事件 我将按钮的值更改为“开始” 我将秒表功能更改为：

function stopwatch(btn){
    if (btn.value == "Start"){
        start();
        btn.value = "Pause";
    }
    else if (btn.value == "Pause"){
        clearInterval(ticker);
        btn.value = "Resume";
    } 
    else {
        ticker = setInterval(tick,1000);
        btn.value = "Pause";
    }
}

这就是你要找的吗？

时间昆虫； var-ticker； var启动时间； 函数倒计时开始{ this.start\u time=start==未定义？1:00:start； this.target_id=计时器； this.name=计时器； 开始时间=this.start\u time； } Countdown.prototype.init=函数{ 这是重置； ticker=setIntervalthis.name+'.tick'，1000； } Countdown.prototype.reset=函数{ 时间=这个。开始时间。分割：； this.minutes=parseInttime[0]； this.seconds=parseInttime[1]； 这个。更新_目标； } Countdown.prototype.tick=函数{ 如果this.seconds>0 | | this.minutes>0{ 如果此值为0.5秒==0{ this.minutes=this.minutes-1； 这个秒=59 }否则{ this.seconds=this.seconds-1； } } 此.update\u目标 } Countdown.prototype.update_target=函数{ 秒=这个。秒； 如果秒数<10秒=0+秒； $this.target_id.valthis.minutes+：+秒 } var定时器=新的倒计时； timer.init； 功能启动{ var s=document.getElementByIdperiod.value； document.getElementByIdperiod.disabled=true； startTimers； } 函数startTimersecs{ timeInSecs=parseIntsecs； document.getElementByIdcountdown.style.color=黑色； clearIntervalticker； ticker=setIntervaltick，1000； 勾选；//立即开始计数器显示 } 功能记号{ var secs=时间单位； 如果秒>0{ 时光虫； showTimesecs； }否则{ 时光虫； document.getElementByIdcountdown.style.color=红色； document.getElementByIdcountdown.innerHTML=您的时间超过了+hhmmsmath.abstimeInSecs； document.getElementByIdperiod.disabled=false； } } 函数showTimesecs{ var小时数=Math.floorsecs/3600； 秒%=3600； var mins=Math.floorsecs/60； secs%=60； var结果=小时<10？0:+小时+：+分钟<10？0:+分钟+：+秒<10？0:+秒； document.getElementByIdcountdown.innerHTML=结果； } 功能秒表{ 如果btn.value==暂停{ clearIntervalticker； btn.value=恢复； }否则{ btn.value=暂停 var timer=新倒计时$'timer'.val； timer.init； } } 函数HHMMSSECS{ var hrs=数学地板/3600； var mns=Math.floorsecs/60%60； 秒=秒%60； 如果小时数<10小时=0+小时； 如果mns<10 mns=0+mns； 如果秒<10秒=0+秒； 返回mns+分+秒+秒； } 选择所需时间 30秒 1分钟 5分钟 15分钟 30分钟 45分钟 60分钟 75分钟 90分钟 105分钟 120分钟

---

请试试这个，先生：

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 {
        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";
}

---

我认为如果你能创建时钟对象会更好。请参阅codesee演示：

该下拉列表的作用是什么？以允许使用多个时间。因此，现在您需要一个按钮来正确启动和停止计时器？理想情况下是启动、暂停，按下后暂停变成恢复，然后重置。然后，一旦计时器已过期，就会显示文本，说明时间已过期。我注意到我犯了一个错误。我忘了包括jquery。现在我做到了。这是小提琴。从下拉列表中选择一个值，然后单击开始。有两个地方显示计时器。定时器和倒计时。我不知道为什么。我的代码只影响倒计时。暂停按钮完全停止计时器。是否有消息说时间已经过了？