Javascript倒计时与开始/停止/重置和输入时间从用户

javascript countdown with start/stop/reset and input time from user

本文关键字：输入 时间 用户 倒计时 开始 停止 Javascript      更新时间：2023-09-26

我基本上希望页面以秒为单位输入用户的时间。

之后，我希望倒计时开始时，用户按下"开始"按钮当按下暂停按钮时，"暂停"。还有一个复位按钮，让用户可以从头开始倒计时。

这是我到目前为止得到的:

<script>
var CCOUNT;
            $(document).ready(function(){
            $('#btnct').click(function() {
            CCOUNT = $('#seconds').val();
            cdreset();
            });
var t, count;
function cddisplay() {
  document.getElementById('timespan').innerHTML = count;
};
function countdown() {
    // starts countdown
    cddisplay();
    if (count == 0) {
        // time is up
    } else {
        count--;
        t = setTimeout("countdown()", 1000);
    }
};
function cdpause() {
    // pauses countdown
    clearTimeout(t);
};
function cdreset() {
    // resets countdown
    cdpause();
    count = CCOUNT;
    cddisplay();
};
</script>
<body>
 <form id="frm"> 
  Seconds: 
  <input type="text" id="seconds" name="seconds" value="0" size="2" maxlength="2"/> 
  <br/>
  <input type="button" id="btnct" value="Input"/>
  </form>
<span id="timespan"></span>
<input type="button" value="Start" onclick="countdown()">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset()">
</body>`

但它不工作，它工作时，我离开了用户输入部分，只是初始化CCOUNT。但是我想让页面接受用户输入

可以运行:http://jsfiddle.net/robschmuecker/XZXLk/

Javascript with jQuery

var CCOUNT;
$(document).ready(function () {
    $('#btnct').click(function () {
        CCOUNT = $('#seconds').val();
        cdreset();
    });
});
var t, count;
function cddisplay() {
    document.getElementById('timespan').innerHTML = count;
}
function countdown() {
    // starts countdown
    cddisplay();
    if (count === 0) {
        // time is up
    } else {
        count--;
        t = setTimeout(countdown, 1000);
    }
}
function cdpause() {
    // pauses countdown
    clearTimeout(t);
}
function cdreset() {
    // resets countdown
    cdpause();
    count = CCOUNT;
    cddisplay();
}
HTML: 

<form id="frm">Seconds:
    <input type="text" id="seconds" name="seconds" value="0" size="2" maxlength="2" />
    <br/>
    <input type="button" id="btnct" value="Input" />
</form>
<span id="timespan"></span>
<input type="button" value="Start" onclick="countdown()">
<input type="button" value="Stop" onclick="cdpause()">
<input type="button" value="Reset" onclick="cdreset()">
相关文章：