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 相关文章推荐
javascipt:filter过滤介绍及使用
Sep 10 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 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/06/24 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python中元组,列表,字典的区别
2017/05/21 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
新大陆软件面试题
2016/11/24 面试题
大学军训感言200字
2014/02/26 职场文书
学生安全承诺书
2014/05/22 职场文书
销售人才自我评价范文
2014/09/27 职场文书
党员个人总结范文
2015/02/14 职场文书
面试通知短信
2015/04/20 职场文书
python常见的占位符总结及用法
2021/07/02 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android