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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
服务员岗位职责
2014/01/29 职场文书
小学生操行评语大全
2014/04/22 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
合同纠纷调解书
2015/05/20 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
2022年显卡天梯图(6月更新)
2022/06/17 数码科技