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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
json简单介绍
2008/06/10 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
mac下如何将python2.7改为python3
2018/07/13 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
如何利用find命令查找文件
2015/02/07 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
水利学院求职自荐书
2014/02/01 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫