Question

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

这是我为它创造的小提琴......

然后在计时器到期之后输出文本，如：

时间到了！

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

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

Answer 1

你可以这样做：

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

function StartTimer() {
    //your code here
}

Answer 2

代码似乎在jsfiddle上没有正常运行，所以我将它下载到我的本地机器上。我发现计时器工作，暂停/恢复按钮也可以。

我所做的改变：

我从选择标记
我将按钮的值更改为＆＃34;开始＆＃34;

我将秒表（）功能改为：

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

这是你在找什么？

Answer 3

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="timer">
<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);" />

＆＃13;

Answer 4

请先尝试一下先生：

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

php 301 redirects actually doing a 302 redirect

我认为如果你创建时钟对象会更好。请参阅代码（请参阅演示：DEMO）

定时器启动和暂停

4 个答案: