原生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 ...
随机推荐
- Use JavaScript to Export Your Data as CSV
原文: http://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/ --------------- ...
- Android拍照、摄像方向旋转的问题 代码具体解释
近期做了个拍照.摄像的应用.遇到了拍照.摄像的图像相对于现实.翻转了90度.原因:相机这个硬件的角度是横屏的角度,所以会出现都是横屏的. 1.照相.摄影预览图像的正确角度显 示: public sta ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found) 报错情况:图标加载失败 原因分析:路径错误 ...
- InnoDB: Error: io_setup() failed with EAGAIN after 5 attempts
在一台server中以各数据库的备份文件为数据文件启动多个MySQL实例供SQL Review使用. 之前执行一直没有问题(最多的时候有23个MySQL实例同一时候执行).后来新配置了一台server ...
- Linux pipe 源代码分析
Linux pipe 源代码分析 管道pipe作为Unix中历史最悠久的IPC机制,存在各个版本号的Unix中,主要用于父子进程之间的通信(使用fork,从而子进程会获得父进程的打开文件表) ...
- 关于Android中物理按键不响应的可能的一个问题。
今天在工作中犯了一个错误,写的视频播放器突然物理音量键就不起作用了. 一開始以为是自己定义的音量条把系统的物理音量条按键给屏蔽掉了. 删除自己定义的音量条还是不行,又怀疑是是加入了什么权限之类的.重复 ...
- Oracle11g表空间导入dmp数据
如果你的表数据没有附带表空间和用户名,那么只要一句话 Imp {u_name}/{u_pwd}@{local_svrname} fromuser={from_user} touser={u_name} ...
- [办公应用]从美国带回来的兄弟牌brother打印机如何处理
周末帮朋友去调一台国外带回来的brother一体机,型号MFC-J630W.这是她单位老板从国外带回来的,说是便宜:不过她说只有英文说明书,她不太会操作.我想这还不容易么,就满口答应下来了.我先到br ...
- 在myeclipse下面创建多层包
比如animal.cat.dog包 先创建animal包 然后创建animal.cat包 最后创建animal.cat.dog包 最后你发现这三个文件夹是分层的,层层嵌套的三个文件夹,而不是一个文件夹 ...