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 相关文章推荐
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
浅析vue数据绑定
Jan 17 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php 数学运算验证码实现代码
2009/10/11 PHP
php Session无效分析资料整理
2016/11/29 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Django添加feeds功能的示例
2018/08/07 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python sorted函数原理解析及练习
2020/02/10 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
高中生第一学年自我鉴定
2014/09/12 职场文书
先进个人申报材料
2014/12/30 职场文书
中英文求职信范文
2015/03/19 职场文书
主持人开场白台词
2015/05/29 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android