JS使用setInterval实现的简单计时器功能示例

 更新时间:2018年04月19日 10:30:19   作者:包子源  
这篇文章主要介绍了JS使用setInterval实现的简单计时器功能,涉及javascript基于setInterval的定时触发与数值运算相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS使用setInterval实现的简单计时器功能。分享给大家供大家参考,具体如下:

使用setInterval实现计时,并且满60秒向分钟进一,满60分钟向小时进一。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net JS计时器</title>
    <script>
      window.onload = function(){
      var mm = 0;
      var ss = 0;
      var str = '';
      var timer = setInterval(function(){
      str = "";
      if(++ss==60)
      {
      if(++mm==60)
      {
      mm=0;
      }
      ss=0;
      }
      str+=mm<10?"0"+mm:mm;
      str+=":";
      str+=ss<10?"0"+ss:ss;
      document.getElementById("d").innerHTML = str;
      },1000);
      };
    </script>
  </head>
  <body>
  <div id="d"></div>
  </body>
</html>

运行结果:

PS:这里再为大家推荐几款时间及日期相关工具供大家参考使用:

在线秒表工具:
http://tools.jb51.net/bianmin/miaobiao

在线日期/天数计算器:
http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期天数差计算器:
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix时间戳(timestamp)转换工具:
http://tools.jb51.net/code/unixtime

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript语言精粹经典实例(整理篇)

    JavaScript语言精粹经典实例(整理篇)

    本文是小编日常读书笔记整理有关javascript知识,都是js精粹非常不错,具有参考借鉴价值,特此分享到脚本之家平台供大家参考
    2016-06-06
  • JS分页控件 可用于无刷新分页

    JS分页控件 可用于无刷新分页

    今天无意看到了这个分页控件,不过使用方法不是很清楚没有研究,。大家可以自行研究,里面的函数写法倒是不错,需要内容的结合
    2013-07-07
  • 百度地图JavascriptApi Marker平滑移动及车头指向行径方向

    百度地图JavascriptApi Marker平滑移动及车头指向行径方向

    本文主要介绍了百度地图JavascriptApi Marker平滑移动及车头指向行径方向的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • javascript中window.location.href的用法

    javascript中window.location.href的用法

    window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法,本文就详细的介绍一下javascript中window.location.href的用法,感兴趣的可以了解一下
    2023-08-08
  • 前端技巧之js-md5的简单使用方法

    前端技巧之js-md5的简单使用方法

    这篇文章主要给大家介绍了关于前端技巧之js-md5的简单使用,js-md5是一种前端加密算法,用于在前端对密码等敏感信息进行加密,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    本文主要分享了使用原生JavaScript实现自定义浏览器滚动条兼容IE、 火狐和chrome的思路与方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js 将线性数据转为树形的示例代码

    js 将线性数据转为树形的示例代码

    这篇文章主要介绍了js 将线性数据转为树形的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • uniapp中常用的几种提示弹框

    uniapp中常用的几种提示弹框

    在前端开发中,为了优化用户的交互体验,常需要用到弹窗来进行提示,引导用户操作,下面这篇文章主要给大家介绍了关于uniapp中常用的几种提示弹框的相关资料,需要的朋友可以参考下
    2022-09-09
  • JavaScript实现的伸展收缩型菜单代码

    JavaScript实现的伸展收缩型菜单代码

    这篇文章主要介绍了JavaScript实现的伸展收缩型菜单代码,可实现JavaScript响应鼠标事件动态遍历及修改页面元素属性的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • JavaScript本地存储实现用户名存储案例

    JavaScript本地存储实现用户名存储案例

    本文主要介绍了JavaScript本地存储实现用户名存储案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论