成品图如意下所示:

实现加到等于5的时候停止

搭建HTML结构

 minutes:<input type="text" value="0">
seconds:<input type="text" value="0">

开始写javascript代码

         var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0, //设置两个初始值为0
seconds = 0; var timer = setInterval(function(){ //开启定时器
seconds ++; //seconds每10毫秒加1
if(seconds == 60){ //当seconds一直增加到等于60的时候
seconds = 0; //seconds清空等于0
minutes ++; //然后miutes加上1
}
secondsNode.value = seconds; //secods == secondsNode里面的value
minutesNode.value = minutes; //minutes == minutesNode里面的value
if(minutes == 5){ //当minutes一直增加到等于5的时候
clearInterval(timer); //清理定时器,停止运行!!!
}
},10);

谢谢观看,有大佬路过指点指点意见

原生javascript实现计时器的更多相关文章

  1. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

  2. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  3. 你可能不需要 jQuery!使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  4. 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

    11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...

  5. 原生javascript加载运行

    原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...

  6. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  7. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  8. javascript学习-原生javascript的小特效(原生javascript实现链式运动)

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  9. javascript学习-原生javascript的小特效(多个运动效果整理)

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

随机推荐

  1. 洛谷——P1547 Out of Hay

    P1547 Out of Hay 题目背景 奶牛爱干草 题目描述 Bessie 计划调查N (2 <= N <= 2,000)个农场的干草情况,它从1号农场出发.农场之间总共有M (1 & ...

  2. 操作redis有关的命令

    )连接操作命令 quit:关闭连接(connection) auth:简单密码认证 help cmd: 查看cmd帮助,例如:help quit )持久化 save:将数据同步保存到磁盘 bgsave ...

  3. SpringMVC Ueditor1.4.3 未找到上传数据

    ueditor自事的fileupload组件与spring的有冲突.将那个类BinaryUploader 重写就可以了             return storageState;         ...

  4. C#:excel导入导出

    资源:excelService 服务 http://download.csdn.net/detail/istend/8060501 排列问题 导出时,数字和字符的排列格式默认不一样,数字靠右,字符靠左 ...

  5. FreeFileSync同步定时执行

    Schedule a Batch Job Create a new batch job via FreeFileSync's main dialog: Menu → File → Save as a ...

  6. 一个基于JBoss5.1+EJB3.0 登陆应用

    花了几天的时间研究了一下EJB的使用,一直以来都主要是在写终端中的程序,对Java框架的相关的开发非常不熟悉,中间遇到了不少麻烦,还好总算都攻克了.写篇日志记录一下. 经验总结 为什么选择JBoss5 ...

  7. Office WORD里插入图片,嵌入型只能显示一半怎么办

    如下图所示,公式编辑器插入的图片如果用嵌入型只能显示一半,但是改成其他方式即可全部显示   选中有问题的段落,点击设置为单倍行距即可  

  8. Python不同功能的函数

    •函数作为参数 import math def add(x,y,f): return f(x) + f(y)print add(25,36,math.sqrt) •map()函数 map()是 Pyt ...

  9. ASP.NET没有魔法——ASP.NET MVC Razor与View渲染 ASP.NET没有魔法——ASP.NET MVC界面美化及使用Bundle完成静态资源管理

    ASP.NET没有魔法——ASP.NET MVC Razor与View渲染   对于Web应用来说,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展示给用户的结果,换句话说Web应用的 ...

  10. 基于github for windows&amp;github的团队协作基本操作

    首先,我们要在github上团队协作.先要建立一个team.这个自行百度,在github上操作就是. 点击打开链接 这是我的有道文章(假设看不到图片的话) 今天主要讲的是怎么操作github for ...