求一个 用JS做一个计时器，有开始，暂停，重置按钮 每2秒增加1 （开始暂停按钮合为一个）
求一个 用JS做一个计时器，有开始，暂停，重置按钮 每2秒增加1 （开始暂停按钮合为一个）
萌新被这题卡住了 逻辑转不过来了求解啊
<!-- 显示数字 -->
<span id="content">0</span>
<!-- 开始、暂停按钮 -->
<input type="button" onclick="clickBtn" id="btn" value="开始"/>
<!-- 重置按钮 -->
<input type="button" onclick="reset" value="重置"/>
<script>
/**
全局变量
1. 数字（就是要进行计数的时间）
2. Interval ( 进行间隔2秒操作的对象 )
3. 状态 （当前是开始、还是暂停状态）（如果当前状态是开始，则 btn 显示暂停，
如果当前状态是暂停，则 btn 显示开始）
**/
var intervalId;
var btn = 0;
var i = 0;
/**
方法：
1. 开始、暂停按钮的点击事件回调方法
2. 重置按钮的点击事件回调方法
**/
function clickBtn() {
/**
根据状态，
1. 当前如果是暂停状态，则开始计数，状态修改为开始
2. 如果当前正在计数，则暂停，状态修改为暂停
**/
var buttons = document.getElementById("btn");
function reset() {
/**
重置计数器
1. 停止计数器
2. 数字置为0
3. 把数字显示出来
**/
btn = 0;
i = 0;
document.getElementById("second").innerHTML = "00"
var buttons = document.getElementById("start");
windows.clearInterval(i);
}
function start() {
/**
设置一个 Interval，每两秒执行一次，每次把 数字+1
把数字显示出来
**/
}
function stop() {
/**
把 Interval 清除
**/
}
萌新被这题卡住了 逻辑转不过来了求解啊
<!-- 显示数字 -->
<span id="content">0</span>
<!-- 开始、暂停按钮 -->
<input type="button" onclick="clickBtn" id="btn" value="开始"/>
<!-- 重置按钮 -->
<input type="button" onclick="reset" value="重置"/>
<script>
/**
全局变量
1. 数字（就是要进行计数的时间）
2. Interval ( 进行间隔2秒操作的对象 )
3. 状态 （当前是开始、还是暂停状态）（如果当前状态是开始，则 btn 显示暂停，
如果当前状态是暂停，则 btn 显示开始）
**/
var intervalId;
var btn = 0;
var i = 0;
/**
方法：
1. 开始、暂停按钮的点击事件回调方法
2. 重置按钮的点击事件回调方法
**/
function clickBtn() {
/**
根据状态，
1. 当前如果是暂停状态，则开始计数，状态修改为开始
2. 如果当前正在计数，则暂停，状态修改为暂停
**/
var buttons = document.getElementById("btn");
function reset() {
/**
重置计数器
1. 停止计数器
2. 数字置为0
3. 把数字显示出来
**/
btn = 0;
i = 0;
document.getElementById("second").innerHTML = "00"
var buttons = document.getElementById("start");
windows.clearInterval(i);
}
function start() {
/**
设置一个 Interval，每两秒执行一次，每次把 数字+1
把数字显示出来
**/
}
function stop() {
/**
把 Interval 清除
**/
}
...全文
请发表友善的回复…
发表回复
衬里ii 2019-02-19
- 打赏
- 举报
谢谢大佬指点！ 看上去比自己的舒服了太多了！
我就是用steInterval... 
丰云 2019-02-19
- 打赏
- 举报
很多人用setInterval方法，就知道打开，关闭，打开，关闭。。。。
其实，在里面加个控制器（run）， 就非常简单而且高效，并且资源占用还少。
思路一定要灵活
丰云 2019-02-19
- 打赏
- 举报
<!DOCTYPE html />
<html>
<head>
<title>back space</title>
</head>
<body>
<span id="content">0</span>
<input type="button" onclick="changeRun();" id="btn" value="开始" />
<input type="button" onclick="reset();" value="重置" />
</body>
</html>
<script type="text/javascript">
var btn = document.getElementById("btn");
var spn = document.getElementById("content");
var idx = 0;
var run = false;
var interval = setInterval(function () {
if (run) {
idx += 1;
spn.innerHTML = idx;
}
}, 2000);
function changeRun() {
if (btn.value == '开始') {
btn.value = '暂停';
run = true;
} else {
btn.value = '开始';
run = false;
}
}
function reset() {
btn.value = '开始';
run = false;
idx = 0;
spn.innerHTML = idx;
}
</script>
衬里ii 2019-02-19
- 打赏
- 举报
乖巧