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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js控制随机数生成概率代码实例

    基本思路:把Math.random()生成的数看着百分比,然后定义每个整数值取值范围. 具体内容如下,供大家参考 'use strict'; export default class GL { /** * 构造函数 * @param {object} opt * @param {number} opt.min 最小整数值 * @param {number} opt.max 最大整数值 * @param {Map} opt.fenpei 自定义概率 */ constructor({ min, ma

  • Javascript通过控制类名更改样式

    控制类名(className 属性) className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; char

  • js实现通过开始结束控制的计时器

    本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下 时间戳的使用的可以取消对多次点击事件产生效果的累加,譬如下文,运用时间戳,保证了在多次点击事件后不会对setInterval()中的时间进行叠加. 开始结束运用addEventlistener()来控制开始结束, 实时显示在你要显示的文本内容放置在setInterval()中,可实现实时显示的效果. 不足setInterval()方法所设置的时间并不能保证一直是1秒的,有误差,但是可通过前后Date()的不同

  • js异步接口并发数量控制的方法示例

    请实现如下的函数(发请求的函数可以直接使用fetch) 可以批量请求数据,所有的URL地址在urls参数中 同时可以通过max参数 控制请求的并发度 当所有的请求结束后,需要执行callback回调 function sendRequest (urls: string[], max: number, callback: () => void) {} fetch 函数返回的是一个promise,promise对象在实例化的时候就已经开始执行了. 简易实现 function fetch(url) {

  • 字节跳动面试之如何用JS实现Ajax并发请求控制

    前言 讲真的,最近也很迷茫.关于技术.关于生活吧.也找了很多在大厂的朋友去聊,想需求一些后期发展的思路.这其中也聊到了面试,聊到了招聘中会给面试者出的一些题目.我正好也好久没面试了,就从中选了几道.最近也会陆续出一系列关于一些面试问题的解析. 今天这道是字节跳动的: 实现一个批量请求函数 multiRequest(urls, maxNum),要求如下: • 要求最大并发数 maxNum • 每当有一个请求返回,就留下一个空位,可以增加新的请求 • 所有请求完成后,结果按照 urls 里面的顺序依

  • js用拖动滑块来控制图片大小的方法

    本文实例讲述了js用拖动滑块来控制图片大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv=Content-Type content="text/html;charset=gb2312"> <title&g

  • JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    JS实现点击按钮控制Div变宽、增高及调整背景色的方法

    本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div调整高度.调整宽度.调整背景色等.实现方面主要是使用JS来控制点击按钮后改变CSS样式文件,这一切都是在JS的动态控制下,比如无刷新切换网页风格的实现,可以以此为基础来扩展. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • js校验开始时间和结束时间

    本文实例为大家分享了js校验开始时间和结束时间的具体代码,供大家参考,具体内容如下 <html> <head> <script> function checkTime(){ var startTime = document.getElementById("_startTime").value.trim(); var endTime = document.getElementById("_endTime").value.trim()

  • 原生js中运算符及流程控制示例详解

    运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li

  • 用JS写了一个30分钟倒计时器的实现示例

    用JS写了一个30分钟倒计时器的实现示例

    前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> <html>     <head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>         <title>Countdown Tim

  • 深入理解JS中的Promise.race控制并发量

    目录 开篇 一.Promise.race 二.并发效果展示 三.代码 总结与思考 开篇 比如在开发中会进行一系列的网络请求,但是有些情况需要控制一下网络请求请并发量.这里简单的用 Promise.race 及 await 的特性来理解一下,如何对任务的并发量进行控制. 一.Promise.race Promise.race 作用就是将多个异步任务包裹起来,当有一个完成的话,那么就会触发 then 事件.除了这个不错的特性方法外,await 这个关键字也比较有用,可以这样理解,await 后面的代

  • 详解Node.js串行化流程控制

    详解Node.js串行化流程控制

    串行任务:需要一个接着一个坐的任务叫做串行任务. 可以使用回调的方式让几个异步任务按顺序执行,但如果任务过多,必须组织一下,否则过多的回调嵌套会把代码搞得很乱. 为了用串行化流程控制让几个异步任务按顺序执行,需要先把这些任务按预期的执行顺序放到一个数组中,这个数组将起到队列的作用:完成一个任务后按顺序从数组中取出下一个. 数组中的每个任务都是一个函数.任务完成后应该调用一个处理器函数,告诉它错误状态和结果. 为了演示如何实现串行化流程控制,我们准备做个小程序,让它从一个随机选择的RSS预定源中获

随机推荐