JavaScript 编码练习：利用一个按钮实现开始计时和停止计时

问题描述

页面上有一个按钮，点击按钮开始计时，页面上显示经过了多少时间，再次点击计时停止。

页面显示如下：

<html><head></head><body><button id="start">Start</button><p><span id="counter">0</span> elapsed second(s)</p> </body>
</html>

解决办法

我的：

//Write-Your-Code-Here
const counterElement = document.getElementById("counter");
const buttonElement = document.getElementById("start");
let intervalId;
const addSeconds = () =>
{const counter = Number(counterElement.textContent);counterElement.textContent = counter + 1;
};
buttonElement.addEventListener("click",e =>{if(buttonElement.textContent === "Start"){intervalId = setInterval(addSeconds, 1000);buttonElement.textContent = "Stop";}else{clearInterval(intervalId);buttonElement.textContent = "Start";}});

参考答案：

const buttonElement = document.querySelector("button");
const counterElement = document.getElementById("counter");
// Global variable to access it from function
let intervalId = null;
// Chronometer state, initially stopped
let started = false;buttonElement.addEventListener("click", () => {if (!started) {// Start the chronometer: add 1 to the counter each secondintervalId = setInterval(() => {counterElement.textContent = String(Number(counterElement.textContent) + 1);}, 1000);// Update button textbuttonElement.textContent = "Stop";} else {// Stop the chronometerclearInterval(intervalId);// Update button textbuttonElement.textContent = "Start";}// Change chronometer statestarted = !started;
});

JavaScript 编码练习：利用一个按钮实现开始计时和停止计时相关推荐

JavaScript点击事件-一个按钮触发另一个按钮
<input type="button" value="Click" id="C" οnclick="Go();" ...
javaScript:实现倒计时定时器setInterval的开始计时、暂停计时、停止计时效果
描述: 点击开始,从60秒开始计时: 点击停止,时间会重置,等再次点击开始,就会从60开始: 点击暂停,倒计时暂停,再次点击开始,则从暂停时的时间开始倒计时效果如图: 代码如下: <butto ...
JavaScript：计时器，包含按钮效果设置
计时器效果: <div><font id='timeCount' style='display:inline-block; font-size:72px;width:100px;te ...
html选择按钮select,Html选择使用select来改变一个按钮的链接使用Javascript
我试图找到一个解决方案与stackoverflow搜索,但我不明白我发现了什么.Html选择使用select来改变一个按钮的链接使用Javascript 基本上我想有一个列表,我可以从中选择一个值,从 ...
【JavaScript】一个按钮实现setInterval开始与暂停
html: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
利用一个继电器来实现脚踏鼠标按钮
➤ 01自动记录测试数据在实验台上集成了两组万用表,通过联网可以通过PYTHON语句自动将万用表的读数自动录入CSDN的markdown的编辑器,提高试验记录的效率和准确性. 第一组万用表:使用ME ...
JavaScript编码风格指南
首次发表在个人博客前言程序语言的编码风格指南对于一个长期维护的软件而言是非常重要的;好的编程风格有助于写出质量更高.错误更少.更易于维护的程序. 团队合作需要制定一些代码规范还有利用一些工具来强 ...
如何在另一个JavaScript文件中包含一个JavaScript文件？
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
Airbnb JavaScript 编码风格指南（2018年最新版）
Airbnb JavaScript 编码风格指南(2018年最新版) 访问此原文地址:http://galaxyteam.pub/didi-fe... 另外欢迎访问我们维护的https://www.t ...

JavaScript 编码练习：利用一个按钮实现开始计时和停止计时

问题描述

解决办法

JavaScript 编码练习：利用一个按钮实现开始计时和停止计时相关推荐

最新文章

热门文章