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之卸载鼠标事件的代码
May 14 Javascript
Firefox div高度自适应
Apr 28 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
Openlayers实现测量功能
Sep 25 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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与java通过socket通信的实现代码
2013/10/21 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
js静态作用域的功能。
2006/12/25 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
pytorch实现查看当前学习率
2020/06/24 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
求职信模版
2013/11/30 职场文书
教学改革实施方案
2014/03/31 职场文书
门店业绩提升方案
2014/06/08 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
会计工作岗位职责
2015/02/03 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python