我基本上希望页面能够接受用户输入的时间(以秒为单位)。
之后我希望当用户按下“开始”按钮时开始倒计时 按下暂停按钮时“暂停”。 还有一个重置按钮，以便用户可以从头开始倒计时。
这是我到目前为止得到的:
<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 与 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()">
关于带有开始/停止/重置和用户输入时间的javascript倒计时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25017268/