js实现通过开始结束控制的计时器
作者：alingyuzi 发布时间：2024-04-18 09:39:03
标签：js,计时器
本文实例为大家分享了js通过开始结束控制计时器的具体实现代码，供大家参考，具体内容如下
时间戳的使用的可以取消对多次点击事件产生效果的累加，譬如下文，运用时间戳，保证了在多次点击事件后不会对setInterval()中的时间进行叠加。
开始结束运用addEventlistener()来控制开始结束，
实时显示在你要显示的文本内容放置在setInterval()中，可实现实时显示的效果。
不足setInterval()方法所设置的时间并不能保证一直是1秒的，有误差，但是可通过前后Date()的不同控制在一定范围内才可执行，不过这里暂时没有设置这个，有空再补。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单计时器</title>
<style type="text/css">
input{
border: 1px solid black;
text-align: right;
font-size:20px;
}
</style>
</head>
<body>
<input type="text" id="text" value="0" >秒
<br>
<input type="button" value="开始计时" id="btn1">
<input type="button" value="停止计时" id="btn2">
<script type="text/javascript">
var time = 0;
var seconde=0;
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var text = document.getElementById("text");
function getStyle(elem, prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[prop];
} else {
return elem.currentStyle[prop];
}
}
var count = 1;//设置时间戳
btn1.addEventListener("click",showTime)
function showTime(e) {
if(count){
time = setInterval(function () {
seconde++;
text.value = seconde;
}, 1000)
count =0;
}
}
btn2.addEventListener("click",stopTime)
function stopTime(){
clearInterval(time);
count =1;
}
</script>
</body>
</html>
来源：https://blog.csdn.net/Alingyuzi/article/details/82987918
0
投稿猜你喜欢
- 相信学Python的小伙伴肯定有这样的尴尬局面，给一个函数不会用，原因是：不知道参数列表中的类型是什么意思，比如初学者都会疑问的：*args
vscode检测到#include错误，请更新includePath。解决方法最近电脑重做，重新安装了一边vscode，但是写代码的时候发现- 本文实例讲述了Python计算一个文件里字数的方法。分享给大家供大家参考。具体如下：这段程序从所给文件中找出字数来。from string
- 本文实例讲述了js实现九宫格图片半透明渐显特效的方法。分享给大家供大家参考。具体实现方法如下：<html><title&g
- 0.目录1.遇到的问题2.创建二维数组的办法•3.1 直接创建法•3.2 列表生成式法•3.3 使用模块numpy创建1.遇到的问题今天写P
- 本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能。分享给大家供大家参考。具体实现方法如下：<!DOCTYPE html P
- 本文总结下如何在编写python代码时对异步操作进行同步化模拟，从而提高代码的可读性和可扩展性。 &nbs
- 项目介绍go-admin 是一个中后台管理系统，基于（gin, gorm, Casbin, Vue, Element UI）实现。主要目的是
- “选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，不只可以应用在导航菜单，一样也可以应用在其他地方。例如选项卡中就
- 我们通常用golang来构建高并发场景下的应用，但是由于golang内建的GC机制会影响应用的性能，为了减少GC，golang提供了对象重用
- 本文介绍的MySQL数据库的出错代码表，依据MySQL数据库头文件mysql/include/mysqld_error.h整理而成。详细内容
- 前言说到 vue 中的 watch 方法，大家可能首先想到，它是用来监听数据的变化，一旦数据发生变化可以执行一些其他的操作。但是 watch
- 其实r 是只读，只能读不能写，这是很明确的，但是r+是可读写，变成r+后还没太明白到底加了什么，还是照样写不了，有没有这样的体验呢,如下代码
- 自动签到的python脚本源码新建一个python文件，checkin.py，保存到电脑上某个位置，我这里保存到的是E:\pyproject
- python查找多层嵌套字典的值def find_dic(item, key): if isinstance(it
- 首先得有一个Scrapy项目，我在Desktop上新建一个Scrapy的项目叫test，在Desktop目录打开命令行，键入命令：scrap
- 如下所示：区别ArrayTensor类型uint8，float32系列{}各类型相互转换uint8转float64：image = imag
- 文档概览本文基于express、express-session实现了简易的登录/登出功能，完整的代码示例可以在这里找到。环境初始化首先，初始
- 介绍Session:在计算机中，尤其是在网络应用中，称为“会话控制”。Session 对象存储特定用户会话所需的属性及配置信息。这样，当用户
- 定义一个banner.js文件，代码如下;window.requestAnimationFrame = window.requestAnim
