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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
JS抛物线动画实例制作
Feb 24 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
javascript实现画板功能
Apr 12 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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
3种平台下安装php4经验点滴
2006/10/09 PHP
NOT NULL 和NULL
2007/01/15 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
PHP session会话的安全性分析
2011/09/08 PHP
深入php数据采集的详解
2013/06/02 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
实例解析Array和String方法
2016/12/14 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python get获取页面cookie代码实例
2018/09/12 Python
浅谈python写入大量文件的问题
2018/11/09 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
好的演讲稿开场白
2013/12/30 职场文书
高一政治教学反思
2014/01/28 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
售后服务承诺书
2014/03/26 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2014年新生军训方案
2014/05/01 职场文书