脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js计数器基础方法

JavaScript实现计数器基础方法

 更新时间：2022年09月01日 14:58:07   作者：Cl_Daisy  
这篇文章主要为大家详细介绍了JavaScript实现计数器的基础方法
，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现计数器的具体代码，供大家参考，具体内容如下

通过使用 JavaScript，设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。在这里只介绍了setTimeout()方法；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      var c = 0
      var t

      function timedCount() {
        document.getElementById('txt').value = c;
        c = c + 1;
        //创建计时器，在指定周期内循环执行
        t = setTimeout("timedCount()", 1000);
      }

      function stopCount() {
        //清除计时器
        clearTimeout(t);
      }
    </script>
  </head>

  <body>

    <form>
      <input type="button" value="开始计时！" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="停止计时！" onClick="stopCount()">
    </form>

  </body>

</html>

效果：

点击开始则会从0开始计数，停止计时则会暂停在那个时刻，再点击开始则会继续累加计数...但是这个程序有一个小bug，当不停的点击开始计时，计时的速度会增加，而且点击一次停止计时不会停止，要响应的点击很多次才可以停止.....

您可能感兴趣的文章:

相关文章

  • JavaScript高阶教程之“==”隐藏下的类型转换

    JavaScript高阶教程之“==”隐藏下的类型转换

    这篇文章主要给大家介绍了关于JavaScript高阶教程之“==”隐藏下类型转换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • javascript中关于break,continue的特殊用法与介绍

    javascript中关于break,continue的特殊用法与介绍

    javascript大家所熟知中的for是一个循环体，循环体其中的break和continue也是大家都比较熟悉的功能，相信大家对它们的用法不会陌生，本文不是介绍其功能，本文假设你已经熟悉break和continue的语意和用法
    2012-05-05
  • uni-app实现数据下拉刷新功能实例

    uni-app实现数据下拉刷新功能实例

    很多列表页总数量很大,一次性查询加载会导致页面有很长时间的空白期,自然体验感极差,就会使用分页加载数据,这篇文章主要给大家介绍了关于uni-app实现数据下拉刷新功能实例的相关资料,需要的朋友可以参考下
    2022-08-08
  • ie下$.getJSON出现问题的解决方法

    ie下$.getJSON出现问题的解决方法

    ie下$.getJSON出现问题是常有的事，下面为大家介绍下具体该如何解决,需要的朋友可以参考下
    2014-02-02
  • 微信公众号平台接口开发 获取access_token过程解析

    微信公众号平台接口开发 获取access_token过程解析

    这篇文章主要介绍了微信公众号平台接口开发 获取access_token过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • javascript实现简单计算器效果【推荐】

    javascript实现简单计算器效果【推荐】

    下面小编就为大家带来一篇javascript实现简单计算器效果【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-04-04
  • JavaScript 处理Iframe自适应高度(同或不同域名下)

    JavaScript 处理Iframe自适应高度(同或不同域名下)

    Iframe自适应高度一直都备受关注，接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应，感兴趣的朋友可以参考下哈
    2013-03-03
  • 利用JavaScript如何查询某个值是否数组内

    利用JavaScript如何查询某个值是否数组内

    这篇文章主要给大家介绍了关于利用JavaScript如何查询某个值是否数组内的相关资料，文中通过示例代码分别介绍了实现该问题的一些解决方法是否可行，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。
    2017-07-07
  • 浅析JavaScript作用域链、执行上下文与闭包

    浅析JavaScript作用域链、执行上下文与闭包

    JavaScript 采用词法作用域（lexical scoping），函数执行依赖的变量作用域是由函数定义的时候决定，而不是函数执行的时候决定，通过本文给大家介绍JavaScript作用域链、执行上下文与闭包相关知识，感兴趣的朋友一起学习吧
    2016-02-02
  • 页面图片浮动左右滑动效果的简单实现案例

    页面图片浮动左右滑动效果的简单实现案例

    本篇文章主要是对页面图片浮动左右滑动效果的简单实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02

最新评论