先看下效果

话不多说上代码~

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>计时器</title>

        <script type="text/javascript">

            var num=0;

            var i;

            function clockstart(){

                 document.getElementById('clock').value=num;

                 num++;

                 i=setTimeout("clockstart()",1000);

            }

            function clockstop(){

                clearTimeout(i);

            }

            function clockclear(){

                num=0;

                setTimeout("document.getElementById('clock').value=0",0);

                clearTimeout(i);

            }

        </script>

    </head>

    <body>

        <input type="text" id="clock" /><br/><br/>

        <input type="button" value="开始" onclick="clockstart()" />

        <input type="button" value="停止" onclick="clockstop()" />

        <input type="button" value="复位" onclick="clockclear()" />

    </body>

</html

代码

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>秒表</title>

        <script type="text/javascript">

        function clock(){

            var time=new Date();

            var attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

            document.getElementById('clock').value=attime;

        }

        setInterval("clock()",100);

        </script>

    </head>

    <body>

        <input type="text" id="clock" />

    </body>

</html>

setTimeout、clearTimeout、setInterval,clearInterval ——小小计时器的更多相关文章

  1. JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结

    已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...

  2. 关闭定时器(setTimeout/clearTimeout|setInterval/clearInterval)

    1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:timerI ...

  3. setTimeout,clearTimeout,setInterval,clearInteral详解

    设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout(" ...

  4. js函数：setInterval()/clearInterval()——js网页计时器

    一.setInterval()/clearInterval()技术学习 都是window对象的方法,可以直接使用. setInterval(function(){},1000);:每1000毫秒执行一 ...

  5. 你真的了解setTimeout和setInterval吗？

    博客园的代码排版真难用,编辑时候是好的,一保存就是乱了——本文也同时发表在我另一独立博客上 你真的了解setTimeout和setInterval吗?,可以移步至这里吧 setTimeout和setI ...

  6. setTimeout和setInterval的各自使用场景

    默认的 setTimeout 只执行一次, 清除用clearTimeout setInterval 每间隔指定的时间, 就执行一次, 清除用clearInterval 但是, setTimeout也可 ...

  7. setTimeout()和setInterval()小结

    写在前面:在写H5游戏时经常需要使用定时刷新页面实现动画效果,比较常用即setTimeout()以及setInterval() setTimeout 描述 setTimeout(code,millis ...

  8. setTimeout和setInterval的使用

    引自(http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html) 这两个方法都可以用来实现在一个固定时间段之后去执行Ja ...

  9. Node.js中setTimeout和setInterval的使用

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...

随机推荐

  1. 【转】makefile语法规则

        1.源程序的编译    在Linux下面,如果要编译一个C语言源程序,我们要使用GNU的gcc编译器. 下面我们以一个实例来说明如何使用gcc编译器.       假设我们有下面一个非常简单的 ...

  2. 嗯，记录一些eclipse的快捷键

    alt+/:自动补全 ctrl+/:注释 // 再按一下取消注释 ctrl+shift+\:区块注释 /* */ ctrl+shift+\:取消区块注释 ctrl+shift+f:格式化代码 ctrl ...

  3. Java模拟登陆【转载】

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...

  4. spring mvc 框架核心文档

    http://docs.spring.io/spring-data/ Parent Directory - cassandra/ 01-Apr-2014 01:50 - commons/ 29-Jan ...

  5. Android 滑动效果高级篇（八）—— 自定义控件

    自定义控件,较常用View.ViewGroup.Scroller三个类,其继承关系如下: 本示例自定义控件,实现一个Gallery效果,并添加了一个显示View个数和位置的bar条,效果图: 自定义控 ...

  6. MHA手动切换 原创1（主故障)

    MHA提供了3种方式用于实现故障转移,分别自动故障转移,需要启用MHA监控: 在无监控的情况下的手动故障转移以及基于在线手动切换. 三种方式可以应对MySQL主从故障的任意场景.本文主要描述在无监控的 ...

  7. PAT 1001

    Calculate a + b and output the sum in standard format -- that is, the digits must be separated into ...

  8. java_SSH整合1

    Domain: public class Department { private Long id; private Set<User> users = new HashSet<Us ...

  9. DataTable转换为Model实体对象

    记得在学校的时候,接触得最多的就是SqlHelper,每次在读取的时候不管是DataTable还是DataReader转换为实体对象的时候是最恼火的,因为要写很多代码,而且没有什么意义.后面接触到了反 ...

  10. vs2010 调试C++程序 快捷键

    命令名 快捷键 说明 调试.应用代码更改 Alt + F10 启动生成操作,利用它可以通过“编辑并继续”功能应用对正在调试的代码所作的更改. 调试.自动窗口 Ctrl + D,Ctrl + A 显示“ ...