javascript - 如何在同一按钮位置循环浏览多个按钮
问题描述
我正在创建一个显示当前运行时间的秒表。我需要创建一个循环通过“开始”“停止”和“重置”的按钮。
它应该以“开始”开始,当单击它时,它会转到“停止”,然后它应该以“重置”结束。并循环通过它们。
我无法在网上找到任何解释这一点的指南。而且我似乎无法自己弄清楚。
start = document.getElementById('Start');
stop = document.getElementById('Stop');
reset = document.getElementById('Reset');
let watchRunning = false;
Start.addEventListener('click', startHandler);
Stop.addEventListener('click', stopHandler);
Reset.addEventListener('click', resetHandler);
function startHandler() {
if (!watchRunning) {
watchRunning = setInterval(update, 70);
}
}
function stopHandler() {
clearInterval(watchRunning);
watchRunning = null;
}
function resetHandler() {
document.getElementById("Time").innerHTML = "00.00";
clearInterval(watchRunning);
watchRunning = false;
}
update();
var seconds;
var milliseconds;
var d;
function update() {
d = new Date();
seconds = d.getSeconds();
milliseconds = Math.floor((d.getMilliseconds() / 10));
if (milliseconds < 10 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + ".0" + milliseconds;
} else if (milliseconds < 10 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + ".0" + milliseconds;
} else if (milliseconds >= 0 && seconds < 10) {
document.getElementById("Time").innerHTML =
"0" + seconds + "." + milliseconds;
} else if (milliseconds >= 0 && seconds >= 10) {
document.getElementById("Time").innerHTML =
seconds + "." + milliseconds;
}
}
#Time {
background-color: yellow;
max-width: 2.3%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<button id="Reset">Reset</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
解决方案
也许你可以稍微改变一下你的想法,而不是三个按钮,将你的想法封装成一个,也许称之为秒表。每次单击按钮时,它都会进入下一个状态并执行相关的处理函数。这就是我的意思:
var startHandler = function (state) { console.log(state); }
var stopHandler = function (state) { console.log(state); }
var resetHandler = function (state) { console.log(state); }
var StopWatch = function (selector) {
var states = ['Start', 'Stop', 'Reset']
var handlers = [startHandler, stopHandler, resetHandler]
var currentState = 0;
var element = document.querySelector(selector);
var clickHandler = function () {
// Execute 'currentState', pass anything you want to handlers
handlers[currentState](states[currentState])
// Update currentState after, means 'move to next state'
if (currentState < (states.length - 1)) {
currentState++;
} else {
currentState = 0;
}
element.innerHTML = states[currentState];
}
return {
init: function () {
// Initial work
element.addEventListener('click', clickHandler);
},
remove: function () {
// Cleanup
element.removeEventListener('click', clickHandler)
}
}
}
StopWatch('#stopwatch').init();
这是一个可运行的示例骨架:
推荐阅读
- timescaledb - 在窗口中的 postgres db 中添加 Timescaledb 扩展找不到 timescaledb.control 错误
- excel - 使用变量命名类对象(Excel VBA)
- cordova - 2020 年如何在 Cordova 上集成 Admob 广告?
- linux - 排序 data.txt | 有什么区别?uniq -q 和只是 'uniq -q'?
- python - 是否可以以矢量化方式避免 igraph 的返回边缘?
- oracle - 如何在 oracle 中使用 `dbms_java.loadjava` 从远程系统上传 jar
- sql-server - 将记录插入到散列 ID 的表中?
- php - Laravel:更新模型和相关模型
- python - 使用 Django 模型对象在生成器中进行延迟评估
- android - 如何从服务器获取图标并将它们存储在android应用程序中