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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
Express的路由详解
Dec 10 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
SVG描边动画
Feb 23 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
小程序api实现promise封装过程解析
Nov 21 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
numpy中的高维数组转置实例
2018/04/17 Python
python实现两个文件夹的同步
2019/08/29 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
python归并排序算法过程实例讲解
2020/11/04 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
AJAX的全称是什么
2012/11/06 面试题
我的大学生活演讲稿
2014/04/25 职场文书
初中政治教学工作总结
2015/08/13 职场文书