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 相关文章推荐
最常用的12种设计模式小结
Aug 09 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
十天学会php之第三天
2006/10/09 PHP
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP新手上路(十二)
2006/10/09 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
vue实现计步器功能
2019/11/01 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
Python中的类学习笔记
2014/09/23 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
用C语言实现文件读写操作
2013/10/27 面试题
精彩的推荐信范文
2013/11/26 职场文书
绩效工资分配方案
2014/01/18 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
民事申诉状范本
2015/05/20 职场文书
东京审判观后感
2015/06/01 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript