0

我想在 JavaScript 中的一个按钮中创建一个暂停和恢复的计时器...计时器工作正常。暂停和恢复工作正常，如果它是 2 个不同的按钮。但是如果我们变成单按钮恢复不会发生。需要帮助...

JavaScript：

paused = false;
 // set minutes
var mins = 30;
 // calculate the seconds 
var secs = mins * 60;
var t = 0;

function countdown() {
    t = setTimeout('Decrement()', 1000);
}

function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        // if less than a minute remaining
        if (seconds < 59) {
            seconds.value = secs;


        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
        t = setTimeout('Decrement()', 1000);
    }
}

function getminutes() {
    // minutes is seconds divided by 60, rounded down
    mins = Math.floor(secs / 60);
    return mins;
}

function getseconds() {
    // take mins remaining (as seconds) away from total seconds remaining
    return secs - Math.round(mins * 60);
}

function pause() {
    clearTimeout(t);
    document.getElementById('Pause').value = "Resume";
    document.getElementById("Pause").onclick = resume();
}

function resume() {
    t = setTimeout();
}

HTML：

<head>
    <title>Countdown</title>
    <script src='myscript'></script>
</head>

<body>
    <div id="timer">
        <input id="minutes" style="width: 24px; border: none; background-color:none;>mts
   <input id=" seconds "  style="width: 26px; border: none; background-color:none;>second
        <div id="timer">
            <input type="button" id="Pause" value="Pause" onClick="pause();" />
        </div>
    </div>
    <script>
        countdown();
    </script>
    </head>

4

2 回答 2

2

问题出在你的resume function

应该是这样的

试试这个代码

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
paused = false;
// set minutes
var mins = 30;
// calculate the seconds 
var secs = mins * 60;
var t=0;
  var flagTimer='resume';
function countdown() {
    t = setTimeout('Decrement()',1000);
}
function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        // if less than a minute remaining
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
        }
        secs--;
        t= setTimeout('Decrement()',1000);
    }
}
function getminutes() {
    // minutes is seconds divided by 60, rounded down
    mins = Math.floor(secs / 60);
    return mins;
}
function getseconds() {
    // take mins remaining (as seconds) away from total seconds remaining
    return secs-Math.round(mins *60);
}
function pause() { 
  if( flagTimer=='resume')
  {
    clearTimeout(t);
    t=0;alert(' 12c  ya');
    document.getElementById('Pause').value="Resume";
    flagTimer='pause';
  }
  else
  {
    flagTimer='resume';
    document.getElementById('Pause').value="Pause";
    resume();
  }

}
function resume() {
    t= setTimeout('Decrement()',1000);
}

</script>
</head>
<body>
    <div id="timer">
        <input id="minutes"  style="width: 24px; border: none; background-color:none;">mts
        <input id="seconds"  style="width: 26px; border: none; background-color:none;"/>second
        <div id="timer">
            <input type="button" id="Pause" value="Pause" onClick="pause();" />
        </div>
    </div>
    <script>
        countdown();
    </script>
</body>
</html>

现场测试 http://jsbin.com/ajegas/8

小提琴 http://jsfiddle.net/hB5E9/1/

于 2013-05-06T07:39:16.643 回答
0

在清除计时器后的暂停函数中，设置变量t = 0;，然后创建一个函数 pausePlay() 来检查if(t) pause(); else play(); 调用 pausePlay onClick

于 2013-05-06T07:35:21.280 回答