1.setTimeout()、clearTimeout(var param)

  • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，只调用一次
  • clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作，参数必须是由 setTimeout() 返回的 ID 值
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #mytime {

                background: #bbb;

                color: #fff;

                display: block;

            }

            .wrapper {

                text-align: center;

                width: 60%;

                margin: 250px auto;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <h1 id=mytime>显示时间</h1>

            <button id="stop" name="button" onclick="stop()">stop</button>

            <button id="start" name="button" onclick="start()">start</button>

            <button id="reset" name="button" onclick="reset()">reset</button>

        </div>

    </body>

    <script type="text/javascript">

        var h = m = s = ms = 0; //定义时，分，秒，毫秒并初始化为0；

        var time = 0;

        function timer() { //定义计时函数

            ms = ms + 50; //毫秒

            if(ms >= 1000) {

                ms = 0;

                s = s + 1; //秒

            }

            if(s >= 60) {

                s = 0;

                m = m + 1; //分钟

            }

            if(m >= 60) {

                m = 0;

                h = h + 1; //小时

            }

            str = toDub(h) + "时" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";

            mytime = document.getElementById('mytime');

            mytime.innerHTML = str;

            time = setTimeout(timer, 50);

        }

        function reset() { //重置

            clearInterval(time);

            h = m = s = ms = 0;

            document.getElementById('mytime').innerHTML = "00时00分00秒0000毫秒";

            document.getElementById("start").removeAttribute("disabled");

            document.getElementById("stop").setAttribute("disabled", true);

        }

        function start() { //开始

            time =setTimeout(timer,50);

            document.getElementById("start").setAttribute("disabled", true);

            document.getElementById("stop").removeAttribute("disabled");

        }

        function stop() { //暂停

            clearTimeout(time);

            document.getElementById("start").removeAttribute("disabled");

            document.getElementById("stop").setAttribute("disabled", true);

        }

        function toDub(n) { //补0操作

            if(n < 10) {

                return "0" + n;

            } else {

                return "" + n;

            }

        }

        function toDubms(n) { //给毫秒补0操作

            if(n < 10) {

                return "00" + n;

            } else {

                return "0" + n;

            }

        }

    </script>

</html>

   2.setInterval()、clearInterval(var param)

  • setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环调用
  • clearInterval(var param) 方法可取消由 setInterval() 函数设定的定时执行操作，参数必须是由 setInterval() 返回的 ID 值
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            #mytime {

                background: #bbb;

                color: #fff;

                display: block;

            }

            .wrapper {

                text-align: center;

                width: 60%;

                margin: 250px auto;

            }

        </style>

    </head>

    <body>

        <div class="wrapper">

            <h1 id=mytime>显示时间</h1>

            <button id="stop" name="button" onclick="stop()">stop</button>

            <button id="start" name="button" onclick="start()">start</button>

            <button id="reset" name="button" onclick="reset()">reset</button>

        </div>

    </body>

    <script type="text/javascript">

        var h = m = s = ms = 0; //定义时，分，秒，毫秒并初始化为0；

        var time = 0;

        function timer() { //定义计时函数

            ms = ms + 50; //毫秒

            if(ms >= 1000) {

                ms = 0;

                s = s + 1; //秒

            }

            if(s >= 60) {

                s = 0;

                m = m + 1; //分钟

            }

            if(m >= 60) {

                m = 0;

                h = h + 1; //小时

            }

            str = toDub(h) + "时" + toDub(m) + "分" + toDub(s) + "秒" + toDubms(ms) + "毫秒";

            mytime = document.getElementById('mytime');

            mytime.innerHTML = str;

        }

        function reset() { //重置

            clearInterval(time);

            h = m = s = ms = 0;

            document.getElementById('mytime').innerHTML = "00时00分00秒0000毫秒";

            document.getElementById("start").removeAttribute("disabled");

            document.getElementById("stop").setAttribute("disabled", true);

        }

        function start() { //开始

            time = setInterval(timer, 50);

            document.getElementById("start").setAttribute("disabled", true);

            document.getElementById("stop").removeAttribute("disabled");

        }

        function stop() { //暂停

            clearInterval(time);

            document.getElementById("start").removeAttribute("disabled");

            document.getElementById("stop").setAttribute("disabled", true);

        }

        function toDub(n) { //补0操作

            if(n < 10) {

                return "0" + n;

            } else {

                return "" + n;

            }

        }

        function toDubms(n) { //给毫秒补0操作

            if(n < 10) {

                return "00" + n;

            } else {

                return "0" + n;

            }

        }

    </script>

</html>

JavaScript--定时器setTimeout()、clearTimeout(var param)和setInterval()、clearInterval(var param)的更多相关文章

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

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

  2. javascript定时器:setTimeout与setInterval

    概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...

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

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

  4. JavaScript定时器详解

    假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...

  5. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  6. Javascript的setTimeOut()和setInterval()的定时器用法

    Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...

  7. Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

    定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTi ...

  8. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  9. javascript 定时器 timer setTimeout setInterval (js for循环如何等待几秒再循环)

    实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 cance ...

随机推荐

  1. HTML5上传文件显示进度

    下面我们使用Html 5的新特性file api实现上传文件,并显示上传文件进度百分比.意图是这样的,当选择文件时,显示当前文件信息.这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服 ...

  2. Matplotlib 简单的使用

    Matplotlib是一个Python 2D绘图库, 只需几行代码即可生成绘图,直方图,功率谱,条形图,错误图,散点图等. 有关示例,请参阅示例图和缩 import matplotlib.pyplot ...

  3. 【PyQt5-Qt Designer】QSlider滑块

    QSlider滑块 QSlider简介 QSlider小部件提供了一个垂直或水平滑块. 滑块是控制有界值的经典控件.它允许用户沿水平或垂直凹槽移动滑块手柄,并将手柄的位置转换为合法范围内的整数值. Q ...

  4. 【SQL】from a,b。表a 和b之间是什么关系？

    1.select a.id from a,b……——>这里a和b用逗号隔开,a,b之间默认是inner join的关系.

  5. 20181211 Oracle Parallel

    如下用Select作为参考, Select 在sql server中如果直接查询大量的数据,方式为给列增加Index,可以提高效率.如果查询数据量非常大的时候其实效率依旧不高,而且index在增删改中 ...

  6. MySQL大表DROP删除小技巧(转)

    在日常工作中,经常会遇到历史大表从主库上迁移到备份机,以便腾出主库空间,那么如果你直接drop table 后,可能会引起数据库抖动,连接数升高等问题,从而影响业务. 那么用一个小技巧,即可轻松平滑的 ...

  7. Oracle(2)之多表查询&子查询&集合运算

    多表查询 笛卡尔积 同时查询多张表时,每张表的每条数据都要和其它表的每条数据做组合.如下栗子,我们发现产生的总记录数是 56 条,还发现 emp 表是 14 条,dept 表是 4 条,56 条正是 ...

  8. Spark SQL 函数全集

    org.apache.spark.sql.functions是一个Object,提供了约两百多个函数. 大部分函数与Hive的差不多. 除UDF函数,均可在spark-sql中直接使用. 经过impo ...

  9. throws和throw的区别

    throws是声明在方法上,告诉调用者这个方法可能会出现的问题.格式  :   方法()   throws  自定义异常类(异常类)    就是在这个方法里面会出问题时,new  throw时,    ...

  10. Java 基础 引用数据类型 ArrayList集合

    引用数据类型(类) 分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好的类,如Scanner类, ...