原生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 ...
随机推荐
- 洛谷——P1265 公路修建
P1265 公路修建 题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公路.修建公路的任务由各城市共同完成. 修建工程分若干轮完成.在每一 ...
- IT桔子 - 千里马俱乐部
IT桔子 - 千里马俱乐部 浙江
- 【TFS 2017 CI/CD系列 - 02】-- Build篇
.创建Build 登录TFS,在现有的[Projects]中选择一个需要要创建Build的Project,点击[Build & Release]跳转页面 在新页面中选择[Builds]选项卡, ...
- [WinForm]DataGridView列头右键菜单
[WinForm]DataGridView列头右键菜单 前言 继续"不误正业" - - #,记录一下.有时候有这样的需求:DataGridView的列头菜单可以选择具体显示哪些列, ...
- maven的超级pom
对于 Maven3,超级 POM 在文件 %MAVEN_HOME%/lib/maven-model-builder-x.x.x.jar 中的 org/apache/maven/model/pom-4. ...
- POJ3262 Protecting the Flowers 【贪心】
Protecting the Flowers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4418 Accepted: ...
- AIDL/IPC Android AIDL/IPC 进程通信机制——超具体解说及使用方法案例剖析(播放器)
首先引申下AIDL.什么是AIDL呢?IPC? ------ Designing a Remote Interface Using AIDL 通常情况下,我们在同一进程内会使用Binder.Broad ...
- 我的家乡:三河古镇已经登上央视CCTV-1新闻联播啦!
在烟雨朦胧时走在古镇的青石街上,别有一番风味!第一幅图为央视的直播车,第二副图为漂亮的三河夜景色!
- 目前使用过的各大厂商rtsp取流的url
目前使用过的各大厂商取流规则是在实际的工作中遇到的相关视频接入问题,通过rtsp协议接入视频数据的一些记录,其中的图片可能来源于网络,内容部分来源于网络,本人仅仅是对相关内容作了汇总. 海康RTSP取 ...
- 比特币客户端bitcoind的高级用法
Bitcoin 比特币官方客户端有两个版本:一个是图形界面的版本,通常被称为 Bitcoin(首字母大写),以及一个简洁命令行的版本(称为 bitcoind).它们相互间是兼容的,有着同样的命令行参数 ...