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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
js实现抽奖效果
Mar 27 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 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
Zerg兵种介绍
2020/03/14 星际争霸
JavaScript 动态改变图片大小
2009/06/11 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
vue编写简单的购物车功能
2021/01/08 Vue.js
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Python中的集合类型知识讲解
2015/08/19 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Django实现表单验证
2018/09/08 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
如何使用python代码操作git代码
2020/02/29 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
写给老婆的检讨书
2014/02/21 职场文书
《火烧云》教学反思
2014/04/12 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
毕业典礼主持词
2015/06/29 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
使用python向MongoDB插入时间字段的操作
2021/05/18 Python