原生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 ...
随机推荐
- Ubuntu 16.04安装Guake Terminal终端(使用一键唤醒功能)
安装: sudo apt-get install guake-indicator sudo apt-get install guake 使用: 先启动guake-indicator,再启动guake. ...
- Using DTrace to Profile and Debug A C++ Program
http://www.oracle.com/technetwork/server-storage/solaris/dtrace-cc-138561.html
- ArcSDE数据库连接(直连、服务连)与GT_Geometry存
http://ziliao1.com/Article/Show/48126AB1A8F563D35E3D0345677C906B 众说周知,ArcSDE空间数据库引擎提供了两种连接数据库的方式.一是服 ...
- OPENWRT安装Python到U盘
http://www.zcilxl.com/tech/23.html 研究了一下如何将软件安装在OPENWRT挂载的U盘上,以Python为例,把过程记录一下. 安装的前提是你的USB设备已经成功挂载 ...
- 火狐浏览器Firefox 如何下载网页的SWF视频,硅谷动力的网站视频怎么下载
1 使用火狐浏览器查看到底视频在哪里,我随便开了一段视频,发现这个SWF(外框套了一个Control.swf,内层才是真实的09-class.swf) 2 我们从下面这一段代码中进行分析 < ...
- SLF4J: Failed to load class的问题及解决
今天在做接口测试,一运行测试程序,就跳出这样一个大大的错误: SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. SLF4 ...
- 书评第003篇:《0day安全:软件漏洞分析技术(第2版)》
本书基本信息 丛书名:安全技术大系 作者:王清(主编),张东辉.周浩.王继刚.赵双(编著) 出版社:电子工业出版社 出版时间:2011-6-1 ISBN:9787121133961 版次:1 页数:7 ...
- 【bzoj1015】【JSOI2008】【星球大战】【并查集+离线】
Description 非常久曾经.在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器.并攻下了星系中差点儿全部的星球.这些星球 ...
- 查看和改动MySQL数据库表存储引擎
要做一名合格的程序猿,除了把代码写的美丽外,熟知数据库方面的知识也是不可或缺的.以下总结一下怎样查看和改动MySQL数据库表存储引擎: 1.查看数据库所能支持的存储引擎: ...
- 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016) D.Dinner Bet 概率DP+排列组合
题目链接:点这里 题意: 1~N标号的球 现在A有C个,B有C个 每次可以随机得到D个不同的球(1~N);问你A或B中的C个球都出现一次的 期望次数 题解: dp[i][j][k]表示 随机出现了i个 ...