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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
js实现类似菜单风格的TAB选项卡效果代码
Aug 28 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
vue实现购物车列表
Jun 30 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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之第六天
2006/10/09 PHP
PHP中soap的用法实例
2014/10/24 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
python让函数不返回结果的方法
2020/06/22 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
教学实验楼管理制度
2014/02/01 职场文书
土木工程专业推荐信
2014/02/19 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
联谊活动总结范文
2015/05/09 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL