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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
js确定对象类型方法
Mar 30 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
javascript中的面向对象
Mar 30 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
element中table高度自适应的实现
Oct 21 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详解ASCII码对照表与字符转换
2011/12/05 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP常用的小程序代码段
2015/11/14 PHP
php fread读取文件注意事项
2016/09/24 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
异步加载script的代码
2011/01/12 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
JavaScript实现滚动加载更多
2020/12/27 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python延时操作实现方法示例
2018/08/14 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python中怎么表示空值
2020/06/19 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
《登鹳雀楼》教学反思
2014/04/09 职场文书
出纳岗位职责
2015/01/31 职场文书
公司安全管理制度范本
2015/08/05 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server