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


Posted in Javascript onApril 19, 2018

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com 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>

运行结果:

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

Javascript 相关文章推荐
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 #Javascript
详解react-redux插件入门
Apr 19 #Javascript
vuex state及mapState的基础用法详解
Apr 19 #Javascript
使用vuex的state状态对象的5种方式
Apr 19 #Javascript
react redux入门示例
Apr 19 #Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 #Javascript
使用typescript开发angular模块并发布npm包
Apr 19 #Javascript
You might like
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python 自定义对象的打印方法
2019/01/12 Python
python3 下载网络图片代码实例
2019/08/27 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
出生医学证明书
2014/09/15 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
护士节慰问信
2015/02/15 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
叶问观后感
2015/06/15 职场文书
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript