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对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
详解Node.JS模块 process
Aug 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访问查询mysql数据的三种方法
2006/10/09 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
前台文员我鉴定
2014/01/12 职场文书
工会换届选举方案
2014/05/21 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js