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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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 strtotime函数详解
2009/12/18 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php文件上传的简单实例
2013/10/19 PHP
php生成短网址示例
2014/05/05 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
理解JavaScript原型链
2016/10/25 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
python能开发游戏吗
2020/06/11 Python
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
利用指针变量实现队列的入队操作
2012/04/07 面试题
小学生暑假感言
2014/02/06 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
三好学生个人总结
2015/02/15 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL