原生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 ...
随机推荐
- 一次使用NodeJS实现网页爬虫记
前言 几个月之前,有同事找我要PHP CI框架写的OA系统.他跟我说,他需要学习PHP CI框架,我建议他学习大牛写的国产优秀框架QeePHP. 我上QeePHP官网,发现官方网站打不开了,GOOGL ...
- GPIO简介
GPIO(General Purpose I/O Ports)意思为通用输入/输出端口,通俗地说,就是一些引脚,可以通过它们输出高低电平或者通过它们读入引脚的状态-是高电平或是低电平. GPIO口一是 ...
- VC++如何折叠代码
工具-选项,然后在文本编辑器,C/C++中的格式设置,把大纲语句块设置为True 这样之后,还是不能像C#一样使用region折叠代码,但是可以方法和if语句都会自动显示可以折叠. 使用#pr ...
- MySql 基本操作语句整理
数据库 DATABASE: 创建 CREATTE {DATABASE | SCHEMA} [IF NOT EXISTS] db_name [DEFAULT] CHARACTER SET [=] cha ...
- libevent编程疑难解答
http://blog.csdn.net/luotuo44/article/details/39547391 转载请注明出处:http://blog.csdn.net/luotuo44/article ...
- 给工作赋予的新意义——Leo鉴书78
现代社会学三大奠基人有两位名字里有"马克思",他们都是德国人.当中一位就是写<资本论>的卡尔•马克思,另一位就是<新教伦理与资本主义精神>的作者马克思•韦伯 ...
- axis client tomcat jsp调用最少jar
tomcat调用和main方法调用不同在于引入的jar不一样.tomcat引入的jar是全部lib以下的jar包,main是project引入的jar.假设直接进行公布lib下的全部jar都会引入到p ...
- Python中暂未解决的问题
编写一个复杂的计算器,可以在通过GUI输出出来.参考代码http://www.cnblogs.com/BeginMan/p/3216093.html shelve模块中open()函数调用文件文件的路 ...
- iOS开发——高级篇——线程保活
线程保活: 顾名思义,就是保护线程不死(保证线程处于激活状态,生命周期没有结束) 正常情况,当线程执行完一次任务之后,需要进行资源回收,也就意味着生命周期结束 应用场景: 当有一个任务,随时都有可能去 ...
- 【bzoj1071】[SCOI2007]组队
sum= A*h+B*s排序 然后枚举height和speed的最小值 然后用两个指针:先枚举speed最小值,然后一边枚举v的最小值一边查询符合条件的人数. #include<algorith ...