javascript设计简单的秒表计时器_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定时器
js秒表计时器
javascript秒表计时器、秒表计时器、秒表计时器在线、flash秒表计时器swf、秒表计时器下载,以便于您获取更多的相关知识。

时间: 2024-10-25 23:17:50

javascript设计简单的秒表计时器_javascript技巧的相关文章

JavaScript实现简单的日历效果_javascript技巧

只是个简单的日历模板,各位可根据需要自行添加需要的功能.该模板更多的是提供了关于年.月.日.月初.月末.星期的获取函数.各位可根据需要自行获取.欢迎提供更简便的方式方法,互相学习提高!谢谢~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="

基于javascript实现简单的抽奖系统_javascript技巧

本文实例为大家分享了js实现简单的抽奖系统,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>抽奖活动</title> <style> *{ margin:0;padding:0; } #title{ color:red;text-align:center;margi

JavaScript实现简单的数字倒计时_javascript技巧

这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下: runCount(10); function runCount(t){ if(t>0){ document.getElementById('shownum').innerHTML = t; t–; setTimeout(function(){runCount(t);},1000); }else{ document.getElementById('shownum').innerHTML = '

JavaScript制作简单的日历效果_javascript技巧

本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>

JavaScript实现简单的拖动效果_javascript技巧

拖动是一件非常酷的事情.你点击某个对象,并按住鼠标不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象放在这里. 下面是一个简单的案例: HTML部分:注意,拖动元素一定要为绝对定义,即position = absolute; 复制代码 代码如下: <div style="position:absolute;height:100px;width:100px;background:red" class="draggable"></div> &l

使用javascript实现简单的选项卡切换_javascript技巧

代码相当简洁.简单易懂,就不多废话了. 直接奉上代码: 复制代码 代码如下: <!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-type" content="text/html" charset="utf-8">         <title>js简单选项卡</title>        

javascript实现简单的二级联动_javascript技巧

二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中原理用到onchange时间. 首先,onchange 事件会在域的内容改变时发生.支持该事件的 JavaScript 对象:fileUpload, select, text, textarea,我们在实现二级联动中正是用到select来完成. 以下是HTML代码,先设置一个select为省,第二个

javascript实现简单的进度条_javascript技巧

示例一: <!doctype html> <html> <head> <meta charset="utf8"> <title>Process Bar</title> <script> var t; function s(c) { if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%"; btn

javascript实现简单的分页特效_javascript技巧

下面是一段javascript实现的分页代码,当然必须要结合后台代码实现.大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function setPage(opt) { if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum) { return false }