原生javascript实现计时器
成品图如意下所示:
实现加到等于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实现计时器的更多相关文章
- 原生javascript 实现 animate
原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
- 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)
11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...
- 原生javascript加载运行
原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...
- 原生javascript模仿win8等待进度条。
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- javascript学习-原生javascript的小特效(原生javascript实现链式运动)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效(多个运动效果整理)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
随机推荐
- 寒武纪camp Day2
补题进度:8/10 A(计数+BIT) 题意: 给一个长度为n的数组a[],任意选0<=i<=j<n,将a[i]~a[j]从小到大排序,形成新的数组.问有多少个不同的新数组. N,a ...
- Maven+mybatis教程
首先,配置maven 在eclipse中把maven路径和settings.xml文件配置好之后,否则后续会有一些问题 可以设一个环境变量M2_HOME指向你的maven安装目录 M2_HOME=G: ...
- S5700&S5710 产品文档 : 配置
http://support.huawei.com/hdx/hdx.do?docid=SC0000699332&lang=zh&path=PBI1-C103367%2FPBI1-C10 ...
- java获得文件的最后修改时间
原文:http://www.open-open.com/code/view/1453190044980 java的File类的lastModified()方法可以返回文件的最后修改时间: String ...
- 扫描控件Web在线Applet
基于JAVAEE的B/S架构由于java语言的跨平台性 所以操控Window客户端资源能力有限, 目前比较流行是用其他语言如Delphi,VB,C++开发客户端控件 然后再html中用js调用. ...
- 国内代码托管平台(Git和SVN)
Github(Git和SVN)https://github.com/ 可以说GitHub的出现完全颠覆了以往大家对代码托管网站的认识.GitHub不但是一个代码托管网站,更是一个程序员的SNS ...
- google官方建议使用的网站性能测试工具
转自:http://www.laokboke.net/2013/05/12/google-official-recommended-site-performance-testing-tools/ 最近 ...
- DacningLinks实现
本文简单分析DancingLinks实现中的数据结构设计,给出了精确覆盖问题及其扩展问题的代码.并应用于数独问题. 先简单描写叙述一下精确覆盖问题: 给定一个N*M的01矩阵,从中选中若干行,这些行向 ...
- Visual Studio VS如何切换代码自动换行
工具-选项-文本编辑器-自动换行
- 高效5步走,高速搭建Hadoop2伪分布环境
前两天将Hadoop2的全然分布式搭建文档整理公布于网上(http://blog.csdn.net/aaronhadoop/article/details/24859369).朋友相邀.就再将Hado ...