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 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 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中调用JAVA
2006/10/09 PHP
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
构建简单的Webmail系统
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python实现ip查询示例
2014/03/26 Python
Python类定义和类继承详解
2015/05/08 Python
django之常用命令详解
2016/06/30 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python 求数组局部最大值的实例
2019/11/26 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
毕业生求职的求职信
2013/12/05 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
详解Redis瘦身指南
2021/05/26 Redis
python中redis包操作数据库的教程
2022/04/19 Python