javascript设计简单的秒表计时器


Posted in Javascript onSeptember 05, 2020

本文实例讲述了javascript设计简单的秒表计时器的实现代码,分享给大家供大家参考,具体如下:

运行效果截图如下:

javascript设计简单的秒表计时器

具体代码如下:

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
 <form action="somepage.asp"> 
 <input type="text" value="0" name="txt1"/> 
 <input type="button" value="开始" name="btnStart"/> 
 <input type="button" value="重置" name="btnReset"/> 
 </form> 
</body> 
</html> 
<script language="JavaScript" type="text/javascript"> 
<!-- 
//获取表单中的表单域 
var txt=document.forms[0].elements["txt1"]; 
var btnStart=document.forms[0].elements["btnStart"]; 
var btnReset=document.forms[0].elements["btnReset"] 
//定义定时器的id 
var id; 
//每10毫秒该值增加1 
var seed=0; 
btnStart.onclick=function(){ 
 //根据按钮文本来判断当前操作 
 if(this.value=="开始"){ 
 //使按钮文本变为停止 
 this.value="停止"; 
 //使重置按钮不可用 
 btnReset.disabled=true; 
 //设置定时器,每0.01s跳一次 
 id=window.setInterval(tip,10); 
 }else{ 
 //使按钮文本变为开始 
 this.value="开始"; 
 //使重置按钮可用 
 btnReset.disabled=false; 
 //取消定时 
 window.clearInterval(id); 
 } 
} 
//重置按钮 
btnReset.onclick=function(){ 
 seed=0; 
} 
//让秒表跳一格 
function tip(){ 
 seed++; 
 txt.value=seed/100; 
} 
//--> 
</script>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
javascript 必知必会之closure
Sep 21 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
vue2中使用less简易教程
Mar 27 Javascript
对node.js中render和send的用法详解
May 14 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
跟我学习javascript的定时器
Nov 19 #Javascript
分享纯手写漂亮的表单验证
Nov 19 #Javascript
javascript获取系统当前时间的方法
Nov 19 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 #Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 #Javascript
跟我学习javascript的Date对象
Nov 19 #Javascript
跟我学习javascript的this关键字
May 28 #Javascript
You might like
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
pandas数据处理进阶详解
2019/10/11 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
项目经理聘任书
2014/03/29 职场文书
运动会的口号
2014/06/09 职场文书
励志演讲稿300字
2014/08/21 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
失恋33天观后感
2015/06/11 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
解决vue中provide inject的响应式监听
2022/04/19 Vue.js