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 保存数组到Cookie的代码
Apr 14 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
PHP 高手之路(二)
2006/10/09 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
基于python操作ES实例详解
2019/11/16 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
学校食品安全实施方案
2014/06/14 职场文书
社区护士演讲稿
2014/08/27 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
解除同居协议书
2015/01/29 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js
Python使用pyecharts控件绘制图表
2022/06/05 Python
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android