成品图如意下所示:

实现加到等于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. loj6165 一道水题(线性筛)

    题目: https://loj.ac/problem/6165 分析: 最直接的想法就是把1~n的所有数分解质因数,然后每个素数的幂取max 我们首先来看看一共可能有哪些素数? 实际上这些素因数恰好就 ...

  2. 检查nginx配置,重载配置以及重启的方法

    原文  http://blogread.cn/it/article/4549?f=hot1 几个常用的nginx命令 Nginx 安装后只有一个程序文件,本身并不提供各种管理程序,它是使用参数和系统信 ...

  3. java获取本机机器名

    java获取本机机器名 InetAddress.getLocalHost().getHostName().toString();

  4. mysql登录退出命令

    1. MySQL登录与退出登录Mysql:“输入mysql -u帐号 -p密码 这是登陆mysql退出:mysql > exit;以下是实例参考下: 登录Mysql:“输入mysql -uroo ...

  5. iphone5s 耳机更换插头 EarPods change jack

    iphone5s 耳机使用了不到两年,出现了接头接触不良,话筒线短路的状况,经常自动出现暂停或者siri.买了一个新耳机,这几天有时间,把旧耳机修好了,更换了一个新的插头.   工具/原料   剥线钳 ...

  6. 247. Segment Tree Query II

    最后更新 二刷 09-Jna-2017 利用线段树进行区间查找,重点还是如何判断每一层的覆盖区间,和覆盖去见与当前NODE值域的关系. public class Solution { public i ...

  7. 【Nginx】负载均衡

    本文介绍的负载均衡是针对的客户端请求在多个Nginx进程之间的均衡.注意与客户端请求在多个后端服务器之间的均衡相区别. 负载均衡问题的产生 在nginx中,建立连接的时候,会设计负载均衡问题.在多个子 ...

  8. Use JavaScript to Export Your Data as CSV

    原文: http://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/ --------------- ...

  9. protobuf 之 MessageLite 接口摘录

    class LIBPROTOBUF_EXPORT MessageLite { public: inline MessageLite() {} virtual ~MessageLite(); // Ba ...

  10. 各种“GND”

    资料来自网上,把个人觉得靠谱的摘取下来 1.地分类: a)直流地:直流电路“地”,零电位参考点: b)交流地:交流电的零线.要与地线区别开,不过,有时候拉电入户之前会把地线和零线接在一起: c)功率地 ...