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 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
利用Psyco提升Python运行速度
2014/12/24 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python正则表达式常用函数总结
2017/06/24 Python
transform python环境快速配置方法
2018/09/27 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
资源环境与城市管理专业推荐信
2013/11/30 职场文书
花店创业计划书范文
2014/02/07 职场文书
房产继承公证书
2014/04/09 职场文书
广告宣传策划方案
2014/05/21 职场文书
企业标语口号
2014/06/10 职场文书
环保标语大全
2014/06/12 职场文书
银行奉献演讲稿
2014/09/16 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年收银工作总结
2014/11/13 职场文书
环境卫生整治简报
2015/07/20 职场文书