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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
js闭包和垃圾回收机制示例详解
Mar 01 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python collections模块实例讲解
2014/04/07 Python
MySQL最常见的操作语句小结
2015/05/07 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
肯尼迪就职演说稿
2013/12/31 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
结婚堵门保证书
2015/05/08 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python