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加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
跟我学习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
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 的内置字符串方法小结
2016/03/15 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python面试题小结附答案实例代码
2019/04/11 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
学生会干部任命书
2015/09/21 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技