JavaScript 简易的秒表计时器

简介: JavaScript 简易的秒表计时器

实现一个简易的秒表计时器,要求点击开始按钮进行计时,点击停止按钮暂停即使,再次点击开始按钮会继续计时。


最近面试第二次遇到这个题了,第一次是快手的一面面试题,当时面试官让我用 Vue 写,磕磕绊绊写出来了,面试完也没想仔细看看代码优化一下,结果今天招商银行的笔试又遇到这道题了,所以决定好好整理一下。

<input id="counter" type="text" readonly>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
<script>
  let step = 0;
  let intervalId = null;
  function count() {
    document.getElementById('counter').value = step;
    step = step + 1;
  }
  function start() {
    if (intervalId===null) {    //没有定时器时再执行
      count();
      intervalId = setInterval(count, 1000);
    }
  }
  function stop() {
    clearInterval(intervalId);
    intervalId = null;    //clearInterval之后需要将intervalId=null
  }
</script>
目录
相关文章
|
6月前
|
前端开发 JavaScript
使用 JavaScript 创建一个兔年春节倒数计时器
使用 JavaScript 创建一个兔年春节倒数计时器
82 0
使用 JavaScript 创建一个兔年春节倒数计时器
|
JavaScript
js节点、属性操作,计时器,location、history对象,常见键盘事件
js节点、属性操作,计时器,location、history对象,常见键盘事件
|
4月前
|
JavaScript 前端开发
JavaScript:计时器
JavaScript:计时器
|
6月前
|
JavaScript 前端开发
【JavaScript】计时器
【JavaScript】计时器
32 0
|
JavaScript
js计时器能做到精确及时吗?
js计时器能做到精确及时吗?
|
JavaScript
JS 启动一个计时器来跟踪某一个操作的占用时长
JS 启动一个计时器来跟踪某一个操作的占用时长
59 0
|
存储 前端开发 JavaScript
使用 JavaScript 制作简单的中秋倒数计时器!
我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛
110 0
|
JavaScript 前端开发
Javascript 计时器
Javascript 计时器
188 0
Javascript 计时器
|
JavaScript 前端开发
JavaScript 计时器
JavaScript 计时器一些需要注意的地方的简单分享~
249 0
|
JavaScript
贪吃蛇 js 原型方法 事件 计时器
通过 原型方法 事件 计时器 等实现贪吃蛇效果。
843 0