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 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
JS判断数组那点事
Oct 10 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python ATM功能实现代码实例
2020/03/19 Python
python爬取招聘要求等信息实例
2020/11/20 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
补充协议书范本
2014/04/23 职场文书
党建工作先进材料
2014/05/02 职场文书
妇联主席先进事迹
2014/05/18 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
主持人开幕词
2015/01/29 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书