开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用vanilla JS让秒表在用户点击同一按钮两次时暂停？

要实现这个功能，可以使用vanilla JS编写以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>秒表</title>
</head>
<body>
    <button id="timer-btn" onclick="startTimer()">开始/暂停</button>
    <p id="timer">0:00</p>

    <script>
        var timerInterval;
        var startTime;
        var running = false;

        function startTimer() {
            var timerBtn = document.getElementById("timer-btn");

            if (running) {
                // 暂停
                clearInterval(timerInterval);
                timerBtn.innerText = "开始";
                running = false;
            } else {
                // 开始
                startTime = Date.now();
                timerInterval = setInterval(updateTimer, 1000);
                timerBtn.innerText = "暂停";
                running = true;
            }
        }

        function updateTimer() {
            var elapsedTime = Math.floor((Date.now() - startTime) / 1000);
            var minutes = Math.floor(elapsedTime / 60);
            var seconds = elapsedTime % 60;

            var timerDisplay = document.getElementById("timer");
            timerDisplay.innerText = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
        }
    </script>
</body>
</html>

这段代码实现了一个简单的秒表功能，当用户点击按钮时，如果秒表正在运行，则暂停秒表并将按钮文本改为“开始”；如果秒表已经暂停，则重新开始计时并将按钮文本改为“暂停”。

这里使用了setInterval函数来定时更新秒表显示，每秒钟执行一次updateTimer函数。通过计算从开始计时到现在的时间差，可以得到秒表显示的分钟和秒钟。这个时间差是通过获取当前时间戳Date.now()来计算的。

推荐腾讯云的相关产品：云服务器（CVM）用于部署和运行应用程序、云数据库 MySQL（CDB）用于存储和管理数据。

参考链接：

相关搜索:如何在点击按钮时停止自动播放视频，然后使用js在点击按钮时重新开始播放如何让按钮在发送时刷新页面，并在重新加载时同时使用同一按钮让iframe滚动到框架底部如何使用G系列Lua API v8.45在单击同一按钮两次时更改按键当用户按下<enter>或单击calculate按钮时，如何让Python3在不使用两个单独的def函数的情况下计算两个数字？js函数导航条 js浮点型转换 js是否可编辑 js单选框只读 js对象赋属性 js 超过行高

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter 状态管理 | 业务逻辑与构建逻辑分离

默认情况暂停记录 ---- 界面的构建逻辑主要体现在界面如何布局，维持界面的出现效果。另外，在界面构建过程中，除了业务数据，还有一些数据会影响界面呈现。...比如打开秒表时，只有一个启动按钮；在运行中，显示暂停按钮和记录按钮；在暂停时，记录按钮不可用，重置按钮可用。这样在不同的交互场景中，有不同的界面表现，也是构建逻辑处理的一部分。 ---- 2....由于数据需要在构建界面时使用，所以很自然的：在布局写哪里，数据就在哪里维护。比如默认的计数器项目，其中只有一个核心数据 _counter ，用于表示当前点击的次数。...在初始状态 none 时，只有一个开始按钮；点击开始，秒表在运行中，此时显示三个按钮，重置按钮是灰色，不可点击，点击旗子按钮，可以记录当前秒表值；暂停时，旗子按钮不可点击，点击重置按钮时，回到初始态。...组件状态类对状态的访问这样 StopWatchBloc 封装了状态的变化逻辑，那如何在构建时让组件状态类访问到 StopWatchState 呢？

1.5K4 0

深度讲解Java多线程开发—电子表项目实现

、“启动秒表”、“暂停”这三个按钮添加监听，并且在相应的监听中添加事件，以至于在点击按钮时候可以触发相应的事件。...} } //如果点击了暂停按钮 if (e.getSource() == pause_JB) { if (pause_JB.getText() == "暂停"...(); //使该线程继续 } } } 3、通过主线程对时间实时显示对按钮控件添加了监听函数之后，是对当前时间的显示，时间的显示是使用主线程，并且在主线程中每一秒更新显示一次数据，在这里使用的是...在修改时间的同时，会设定进行秒表运行的threadSecond线程，该线程的使用是在点击“启动秒表”按钮之后启动该线程，同时在后台开始计时，每秒对数据更新一次，之后在“暂停”按钮中添加事件，在点击“暂停...”之后可以将threadSecond暂停，同时此按钮变成“继续”，在点击继续之后，threadSecond线程会继续执行，直到点击了“停止计时”之后，该线程将会跳出循环中止。

7094 0

嵌入式Qt-做一个秒表

它可用通过手动通过connet函数实现，而对于使用Qt Creater的图形界面设计方式，通常也是继续通过界面实现信号和槽的连接：在开始按钮上右键，选则“**转到槽...**”：然后有多种按钮信号可以选择...，因为开始按钮同时具有暂停/继续的功能，这里使用toggled功能，利用按钮的按下和松开状态，来实现暂停/继续的功能：点击OK之后，会自动跳到到代码页面，并自动生成对应的槽函数框架，然后就可以在里面编译对应的业务逻辑代码了...：开始按钮的具体业务逻辑代码如下，当首次按下时，checked为true，此时启动timer，记录此时的时间戳，然后将按钮的文字显示为“暂停”，同时将复位和打点按钮置灰，使这两个按钮不能再按下，因为暂停的时候执行复位和打点无意义...2.3.2 复位按钮的处理复位按钮也是通过右键来调整到槽，注意这里使用clicked函数即可，因为复位按钮只需要使用它的点击按下功能：对应的槽函数的具体实现如下： void Widget::on_Btn_Reset_clicked...，介绍了如何使用Qt Creator的UI界面设计功能，进行Qt的开发，并将代码进行交叉编译，放入i.MX6ULL的Linux环境中测试运行情况。

1.1K3 0

Flutter 绘制集录 | 秒表运动与Ticker

前言如下所示，在上一篇中我们通过绘制，自定义了一个秒表盘的组件。本文将对该组件进行实际的应用，让其实现秒表运动的展示功能。 ---- 1. 等宽字体在实现秒表运动之前，先来看个问题。...下面通过点击 + 号，让当前的 Duration 对象增加 100 ms ，这里有一点小问题：由于目前字体不同数字的宽度存在差异，所以在变化过程中存在 “抖动” 的现象：这是字体本身的问题，比如下面字体十个数字有...我们如果想在点击时改变表盘显示的内容，就要由使用者来维护状态的变化，其实这本质上和计数器项目没有区别，只不过这里变化的是 Duration 对象而已。...当点击按钮时，触发 updateDuration 方法，在当前 Duration 对象的基础上 + 100 ms 。之后，通过 setState 触发重新构建。...由于有暂停的需求，而 _ticker.stop 会让回调中的 Duration 对象重置。

1.1K3 0

python中delay__python delay函数「建议收藏」

Python 中的sleep函数本人是Python菜鸟一枚，今天用python时，发现如果按照下图所示来写程序在我的Python环境(Win7+Python2.7.9)下测试没问题，是等待5秒后再输出...timetime.sleep(1) # 睡1stime.sleep(0.1) # 睡100mstime.sleep(0.01) # 睡10mstime.sleep(0.001) # 睡1ms Python如何实现同一行内延时输出...copyright”, “credits” or “license” for more information.>>> help(time.sleep)Help on built-in functio python如何在显示毫秒秒表的时候同时定时循环截图参考网上写了如下代码...，这代码是在一个窗体上显示毫秒秒表，然后在显示>> #加了上面这段while运行时窗体不显示只是后台在截图，这是为什么，要怎么处理？...事件包括窗体绘图，窗体刷新，鼠标按钮点击等。这些事件是在 app.MainLoop() 里面进行捕获和处理的。

1.9K4 0

多功能时钟应用

TimePickerDialog时，点击对话框的确定按钮，会添加两条数据， // 原因是OnTimeSetListener中的onTimeSet()执行了两次，...// 点击确定按钮时执行一次， // 对话框取消时，TimePickerDialog的onStop()方法中也执行了一次。....equals(getResources().getString(R.string.start))) { //点击开始按钮...) .equals(getResources().getString(R.string.quit))) { //点击取消按钮....equals(getResources().getString(R.string.pause))) { //点击暂停按钮

1K2 0

如何制作自己的原生 JavaScript 路由

但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。只要你了解实现它所涉及的所有部分，就可以相对容易的在原生 JavaScript 中创建自己的路由。...history.back() 与 history.go(-1) 相同，或者当用户在浏览器中单击 Back 按钮时。你可以用任何一种方法达到相同的效果。...当用户按下浏览器的 Forward 按钮时，将执行 history.forward()，它等效于 history.go(1)”。...结果:现在，每次我们单击按钮时，URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。请注意，每次单击按钮时，history.pushState 被触发。

3.9K2 0

微信公众平台开放JS-SDK(微信内网页开发工具包)

微信JS-SDK主要包含以下能力： 1、分享类接口支持获取“分享到朋友圈”、“发送给朋友”、“分享到QQ”和“分享到微博”按钮的用户点击状态，同时支持自定义分享内容。...此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。...使用说明在使用微信JS-SDK对应的JS接口前，需确保公众号已获得使用对应JS接口的权限，可登录微信公众平台进入“开发者中心”查看对应的接口权限。...fail：接口调用失败时执行的回调函数。 complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。 cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。...trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

12.8K6 0

「译」如何用原生JS打造一款简易谷歌插件

如果你知道如何建设一个基本的网站，那么你就可以很轻松地做出这种插件。前期准备我们打算一切从简，所以本教程只会使用HTML、CSS和基本的JS，以及下面会讲到的自定义mainfest.json文件。...因为我不打算让它一直显示，所以我将其放在一个名为settings的div下，该div只在用户点击settings按钮的时候才会显示。...我将给settings按钮和输入框添加内边距和轮廓，之后让settings按钮和输入框之间留有一点空隙。...当添加settings-open类给已经有settings类的div时，div将不会隐藏，而是在正常位置显示。...我将用flexbox使标题居中，让它变得更大。同时在CSS中给body添加一个渐变背景。为了在渐变背景中突出按钮和h2，我会把它们设置成白色的。

1.6K5 0

使用 Vanilla JavaScript 框架创建一个简单的天气应用

最近我在浏览国外的一些技术网站时，这个词出现的频率实在是在太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？...vanilla-js.com 官方网站是这样介绍的：Vanilla JS is a fast, lightweight, cross-platform framework for building incredible...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...1、当按钮提交时当用户点击按钮或者按回车键时，我们的程序应该这么做：阻止提交按钮的默认行为，防止刷新页面。获取输入框输入的城市信息。...，我们需要进行去重，要不就会发生如下的效果，并不是我们期望的：这是个糟糕的用户体验，除此之外，还需要处理一个情况，如果一个城市，比如 Athens，在希腊是雅典，在美国为雅典-克拉克县，这种情况不能认为是重复的请求

1.6K3 0

Python 自动化指南（繁琐工作自动化）第二版：十七、计时、安排任务和启动程序

第一步：设置程序跟踪时间秒表程序需要使用当前时间，所以您需要导入time模块。你的程序还应该在调用input()之前给用户打印一些简短的指令，这样用户按下Enter后定时器就可以开始计时了。...暂停到特定日期 time.sleep()方法让你暂停一个程序几秒钟。通过使用一个while循环，你可以暂停你的程序直到一个特定的日期。...当传递参数给一个新线程中的函数时，使用threading.Thread()函数的args和kwargs关键字参数。并发问题您可以轻松地创建几个新线程，并让它们同时运行。...它可以用来给你的程序添加暂停。但是如果你想安排你的程序在某个时间启动，nostarch.com/automatestuff2的指令可以告诉你如何使用你的操作系统已经提供的调度器。...您应该如何避免多线程并发问题？实践项目为了练习，编写执行以下操作的程序。美化后的秒表扩展本章中的秒表项目，以便它使用rjust()和ljust()字符串方法来“美化”输出。

2.7K2 0

React ref & useRef 完全指南，原来这么用！

可变值 - 1.1用例:记录按钮点击 - 1.2用例:实现秒表 2. 访问DOM元素 - 2.1用例:聚焦输入 3.更新引用限制 4....现在，让我们看看如何在实践中使用 useRef()。...实例:记录按钮点击组件logbuttonclicked使用了一个引用来存储按钮的点击次数: import { useRef } from 'react'; function LogButtonClicks...reference 和 state 之间的主要区别让我们重用上一节中的logbuttonclicked组件，但使用useState()钩子来计算按钮的点击次数: import { useState }...此外，如果组件在秒表处于活动状态时卸载，useEffect()的清理函数也将停止计时器。在秒表示例中，ref用于存储基础架构数据—活动计时器id。

6.7K2 0

React Native调试心得

心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。...Sources 面板可以让你看到你所要检查的页面的所有脚本代码，并在面板选择栏下方提供了一组标准控件，提供了暂停，恢复，步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...执行控工具从上图可以看到“执行控工具”按钮在侧板顶部，让你可以按步执行代码，当你进行调试的时候这几个按钮非常有用：继续(Continue): 继续执行代码直到遇到下一个断点。...高级操作上文讲到右键点击蓝色标签会打开一个菜单，下面就介绍一下该菜单下的高级操作。执行到此(Continue to Here)：如果你想让程序立即跳到某一行时，这个功能会帮到你。...在输入框中，输入一个可解析为真或假的表达式。仅当条件为真时，执行会在此暂停。 ? 心得：如果你想让程序在某处从来都不要暂停，可以编辑一个条件永远为false的条件断点。

5.1K7 0

使用 Vanilla JavaScript 框架创建一个简单的天气应用

最近我在浏览国外的一些技术网站时，这个词出现的频率实在是太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？...vanilla-js.com 官方网站是这样介绍的：Vanilla JS is a fast, lightweight, cross-platform framework for building incredible...当前屏幕小与等于700px时，应用名称、输入框、按钮各占一行，界面如下图所示： ?...1、当按钮提交时当用户点击按钮或者按回车键时，我们的程序应该这么做：阻止提交按钮的默认行为，防止刷新页面。获取输入框输入的城市信息。...这是个糟糕的用户体验，除此之外，还需要处理一个情况，如果一个城市，比如 Athens，在希腊是雅典，在美国为雅典-克拉克县，这种情况不能认为是重复的请求，我们支持用逗号分隔输入，前面城市后面国家简写。

1.6K2 0

自学鸿蒙应用开发（46）- 处理应用前后台切换

需要长时间运行的应用不会永远保持在前台运行，用户很可能在计时的同时需要微信聊天，或者刷视频。对于秒表应用来讲就是被切换到后台。这时我们希望：无论秒表应用处于前台还是后台，计时动作都可以继续执行。...切换到后台时秒表音频暂停播放，切回前台时继续播放音频。...PlayStatus.PSUSE){ soundPlayer.resume(taskId); playStatus = PlayStatus.PLAYING; } } 切换到后台时暂停播放...计时过程中的退出应用处理如果计时过程中用户进行退出操作，我们希望应用不会应用真正退出，而是切换到后台继续计时。...这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题；另一方面通过对这些问题的解决过程进行说明，让读者明白在编写代码时如何判断使用设计模式的利弊，并合理运用设计模式。

6262 0

怎么用 JavaScript 构建自定义的 HTML5 视频播放器

当使用标签时的主要警告是渲染的视频播放器会因浏览器而异，如果你想提供一致的用户体验，使用原生操作并不理想。这就是为什么构建自定义控件而不是使用浏览器默认界面很有用的原因。...我们需要通过点击播放按钮来播放或者暂停视频，并且更改应该匹配视频状态的图标。...这里是实操效果：点击视频播放或者暂停在很多视频播放器应用中，点击视频本身能够快速进行播放或者暂停，所以，在我们的播放器中也实现它。...); 虽然这可行，但是让我们通过在播放或者暂停视频时添加一些反馈让这更有趣，就像 YouTube 或者 Netflix 上一样。...你也可以通过点击（画中画模式）右上角的关闭按钮关闭 PiP 窗口。切换视频控件视频控件会占用一些空间并阻挡用户查看一些内容。

11.2K2 0

React Native调试技巧与心得

心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个路由器下。...Sources 面板可以让你看到你所要检查的页面的所有脚本代码，并在面板选择栏下方提供了一组标准控件，提供了暂停，恢复，步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。...执行控工具从上图可以看到“执行控工具”按钮在侧板顶部，让你可以按步执行代码，当你进行调试的时候这几个按钮非常有用：继续(Continue): 继续执行代码直到遇到下一个断点。...高级操作上文讲到右键点击蓝色标签会打开一个菜单，下面就介绍一下该菜单下的高级操作。执行到此(Continue to Here)：如果你想让程序立即跳到某一行时，这个功能会帮到你。...在输入框中，输入一个可解析为真或假的表达式。仅当条件为真时，执行会在此暂停。 ? 心得：如果你想让程序在某处从来都不要暂停，可以编辑一个条件永远为false的条件断点。

6.8K5 0

Human Interface Guidelines —— Tab Bars

·严格使用tab bar进行导航 tab bar按钮不应该用于执行操作。如果您需要能够对当前视图中的元素起作用的控件，请改为使用toolbars。...·避免有太多标签每个额外增加的tab都会减少选择tab时的可点击区域，并增加app的复杂性，从而使寻找信息变得更加困难。...例如，如果iOS设备上没有歌曲，则音乐app中的我的音乐tab将介绍如何下载歌曲。...tab bar 可让用户在app的不同部分之间快速切换，例如时钟应用中的闹钟，秒表和计时器tab。Toolbar 包含用于执行与当前上下文相关的操作的按钮，如创建项目，删除项目，添加注释或拍摄照片。...标签栏和工具栏永远不会同时出现在同一个视图中。

1.4K15 0

如何移除你项目中99%的JS代码

可见，性能瓶颈的源头在JS代码。 React18的Selective Hydration通过「让用户交互的部分优先hydrate」来优化TTI指标。...在点击按钮后，会发起2个JS请求，第一个请求返回的是「点击后的逻辑」：第2个JS请求返回的是「组件重新render的逻辑」：这两段代码执行后，Counter变为1。...所以在Qwik中，如无必要，数据不会被初始化两次。...交互时再请求JS不会卡么？有同学可能会问，如果在网络不好的情况下，交互时再请求JS代码不会让交互变得卡顿么？...Qwik允许你指定「哪些组件可能是用户大概率会操作的」（比如电商应用中，购物车按钮被点击的概率高）。

8.9K6 0

微信JS-SDK的使用

步骤三：引入JS文件在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.2.0.js 备注：支持使用 AMD/CMD 标准模块加载方法加载...步骤四：通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用...4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。 5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。...用户取消时："xxx:cancel"，其中xxx为调用的接口名。调用失败时：其值为具体错误信息。 1.基础接口 (1).判断当前客户端版本是否支持指定JS接口。...api_ticket，与步骤三中config使用的签名凭证jsapi_ticket不同，开发者在调用微信卡券JS-SDK的过程中需依次完成两次不同的签名，并确保凭证的缓存。

16.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭