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
投稿猜你喜欢
- __getitem__ 来看个简单的例子就明白：def __getitem__(self, key): return self.data[k
- 灰度图像是对图像的颜色进行变换，如果要对图像进行压缩该怎么处理呢？1、矩阵运算中有一个概念叫做奇异值和特征值。设A为n阶矩阵，若存在常数λ及
- 多表操作 在一个数据库中，可能存在多个表，这些表都是相互关联的。我
参考其他比较专业的博客系统，都在代码块上有一个复制代码的按钮。用来快速复制整个代码块的代码。于是我也想给我的博客增加一个这个功能。注：chr- 根据菜鸟教程Django教程学习，运行"python manage.py migrate" 报错，出现django.db
- 目录设计到的前端知识注册业务实现前端注册业务逻辑导入vue.js和ajax请求的js库准备register.js文件后端业务注册逻辑设计到的
- 本节重点让学生了安装上Python，配置好环境变量Python目前已支持所有主流操作系统，在Linux,Unix,Mac系统上自带Pytho
- 之前有文章，使用Android平台的OpenCV接入了视频，控制的目标是手机的摄像头，这是OpenCV的好处，使用OpenCV可以使用跨平台
- 一般情况下编译安装python环境需要执行以下步骤：下载源码包解压源码包安装配置编译以及编译安装TALK IS CHEAP, SHOW YO
- 1、MySQL 5.6.32 64位安装包下载在官网http://dev.mysql.com/downloads/mysql/5.6.htm
- 值类型和引用类型值类型：int、float、bool和string这些类型都属于值类型，使用这些类型的变量直接指向存在内存中的值，值类型的变
- 骨骼识别的应用场景如今，当前疫情大环境之下。很多人，因为居家办公或者其他原因闷在家里不能外出健身。那么，借助骨骼识别和卷积神经网络模型，计算
- 环境：python-3.6.5JSONJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它使得人
- 这本入门手册是否合适你?我只想告诉你我非常喜欢这本书。我对Microsoft Access的经验足以让我跳过这本傻瓜系列教材，但是实际情况是
- 在js中调用asp文件的方法很简单，我们可以用在静态页面的点击数统计，虽然静态页面不支持asp程序，但是我们可以使用js调用，来变相的达到这
- Rs.Open参数说明在ASP中经常用Rs.Open sql,conn,1,1这样的方式打开数据库,但仍有一部分同行不知道这是嘛意思,现整理
- 网上有很多提供在线按钮制作、文字标题制作、Logo制作服务的网站，它们可以非常方便了让大家轻松的获得效果出色的各类图标型的图片，下面就快来看
- 今天在推上看到一条获取PHP类私有属性的推文，感觉很有意思：顺着推文联想，还有其他方式吗？经过自己的测试及网上答案，总结出三种方法：1. 反
- 前言左思右想没有头绪时，刚好看到一篇介绍Pygame制作飞机大战的文章。文章写的不错，文中代码拿来就能跑。有了！要不直接把飞机大战改成接兔子
- 本文实例讲述了Python实现将Excel转换为json的方法。分享给大家供大家参考，具体如下：#-*- encoding:utf-8 -*
