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 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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仿ZOL分页类代码
2008/10/02 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js单例模式详解实例
2013/11/21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python绘制漏斗图步骤详解
2019/03/04 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
成人大专自我鉴定范文
2013/10/19 职场文书
高二英语教学反思
2014/01/19 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
活动总结的格式
2014/05/07 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
python基础之文件操作
2021/10/24 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android