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 相关文章推荐
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
详解jQuery中的easyui
Sep 02 jQuery
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
javascript前端实现多视频上传
Dec 13 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 调试工具Debug Tools
2011/04/30 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
深入php数据采集的详解
2013/06/02 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
Symfony控制层深入详解
2016/03/17 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python并发和异步编程实例
2018/11/15 Python
python可视化实现KNN算法
2019/10/16 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
AURALog面试题软件测试方面
2013/10/22 面试题
电信营业员自我评价分享
2014/01/17 职场文书
食品业务员岗位职责
2014/03/18 职场文书
企业指导教师评语
2014/04/28 职场文书
化学工程专业求职信
2014/08/10 职场文书
人事任命通知书
2015/04/21 职场文书
电视新闻稿
2015/07/17 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang