先看下效果

话不多说上代码~

<!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. 基础数据结构 之 队列（python实现）

    队也是编程开发中常见的一种数据结构.栈和队可用来模拟函数的递归过程.队的特点为先入先出,主要操作包括入队和出队.入队时需判断队是否已满,出队时需判断队是否为空.下面给出一个队的python实现的例子: ...

  2. HTTP协议报文、工作原理及Java中的HTTP通信技术详解

    一.web及网络基础       1.HTTP的历史            1.1.HTTP的概念:                 HTTP(Hyper Text Transfer Protocol ...

  3. UNIX基础知识之用户标识

    一.用户ID 口令文件(/etc/passwd)登录项中的用户ID(user ID)是个数值,它向系统标识各个不同的用户.系统管理员在确定一个用户的登录名的同时,确定其用户ID.用户不能更改其用户ID ...

  4. JDK 7u60 版本发布下载安装

    JDK 7u60 版本发布了,主要改进包括: JavaFX 更新到 2.2.60 Java Mission Control(JMC)更新到 5.3 如果你在一个早期版本的Java中禁用了过期检查功能, ...

  5. mysql导入数据库

     mysql -u root -p bbs < d:\bbs_2011-06-15 --default-character-set=gbk      mysqldump -uroot -p ta ...

  6. Direct3D11-1 初始化

        在使用一个东西之前,我们需要初始化他,好比汽车加油,手机充电.于是我们采取平时的编码习惯,试图写下如下代码         Direct3D11 _direct3d11;     事实上,我们 ...

  7. CCOrbitCamera卡牌翻转效果

    static CCOrbitCamera* create(float t, float radius, float deltaRadius, float angleZ, float deltaAngl ...

  8. 为Mono安装MySql连接驱动

    为Mono安装MySql连接驱动(转) 2013 年 1 月 24 日.NETmono.MySql DOTNET and Mono by default only support database c ...

  9. （重刷）HDU 1874 畅通工程续 + HDU 2544 最短路 最短路水题，dijkstra解法。

    floyd解法 今天初看dijkstra,先拿这两题练手,其他变形题还是不是很懂. 模版题,纯练打字... HDU 1874: #include <cstdio> #define MAXN ...

  10. javaweb学习总结十六(tomcat服务器的使用、虚拟目录的映射)

    一:tomcat服务器的目录 1:目录结构 2:web应用程序介绍 二:虚拟目录的映射 假如我在E盘建立一个目录web,里面存放1.html文件,我想让外界访问 1:直接在conf目录下的server ...