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

setTimeout 用法：

window.setTimeout('语句',毫秒);   //指定毫秒后执行一次语句

【例】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

</head>

<body>

    <p id="p">定时改变文字</p>

    <script>

        function change(){

            document.getElementById("p").innerHTML = "已更换";

        }

        window.setTimeout("change()", 3000); //3秒之后执行change方法

    </script>

</body>

</html>

优化：定时器的效果之上加上倒计时效果

setInterval('语句',毫秒);  //每隔指定毫秒执行一次

清除定时器：

clearInterval();

和

clearTimeout();

【代码】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

</head>

<body>

    <input type="button" name="time" value="5">

    <p id="p">定时改变文字</p>

    <script>

        function change(){

            var inp = document.getElementsByName("time")[0];

            var time = parseInt(inp.value)-1;

            inp.value = time;

            if(time == 0){

                document.getElementById("p").innerHTML = "已更换";

                clearInterval(clock);  //清除定时器

            }

        }

        var clock = setInterval("change()", 1000); //每秒钟执行一次

    </script>

</body>

</html>

【例】如果不适用 setInterval，只使用 setTimeout，达到每过一段时间执行一次的效果

使用 setTimeout 实现 setInterval 的效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div1{

            width: 300px;

            height: 300px;

            background: blue;

            border-bottom: 1px solid black;

        }

    </style>

</head>

<body>

    <input type="button" name="time" value="5">

    <p id="p">定时改变文字</p>

    <script>

        var clock = null;

        function change(){

            var inp = document.getElementsByName("time")[0];

            var time = parseInt(inp.value)-1;

            inp.value = time;

            if(time == 0){

                document.getElementById("p").innerHTML = "已更换";

                clearTimeout(clock);

                return;

            }

            setTimeout("change()", 1000);

        }

        var clock = setTimeout("change()", 1000); //每秒钟执行一次

    </script>

</body>

</html>

Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval的更多相关文章

  1. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  2. 定时器setTimeout()和setInterval()使用心得整理

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...

  3. 有关定时器setTimeout()、setInterval()详解

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...

  4. 高级定时器-setTimeout()、setInterval()、链式setTimeout()

    使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...

  5. 20180904 定时器setTimeout和setInterval回调问题

    引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...

  6. JavaScript 的定时（Timing ）事件——setTimeout()与setInterval()

    JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events). ㈠Timing 事件 ⑴window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件. ...

  7. 使用定时器settimeout、setInterval执行能传递参数的函数

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于 ...

  8. javascript定时器:setTimeout与setInterval

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

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

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

随机推荐

  1. HTTP状态码和常用对照表

    http://tool.oschina.net/commons 响应码:“200” : OK: “302” : Found 暂时转移,用于重定向, Response.Redirect()会让浏览器再请 ...

  2. Linux 中文乱码问题

    弄了好久还是乱码 最终方法:进入 vim /etc/vimrc中 原先只有一个 set encoding=utf-8 fileencodings=ucs-bom,utf-8,cp936改成: let ...

  3. Animation & Property Animation 使用

    本篇主要讲Animation 和 Property Animation的使用,最后会讲QQ管家桌面火箭作为例子: 在Android中开发动效有两套框架可以使用,分别为 Animation 和 Prop ...

  4. Ubuntu下VIM的安装和基本用法

    1.用root账户登录Ubuntu,命令行中输入vim,如果未安装会得到下面的提示: 程序“vim”已包含在下列软件包中:  * vim  * vim-gnome  * vim-tiny  * vim ...

  5. iptables 无法连外网

    [root@v01-svn-test-server ~]# service iptables status Table: filter Chain INPUT (policy DROP) num ta ...

  6. 《数据结构与算法分析》学习笔记（四）——栈ADT

    一.栈ADT是what? 1.定义 栈,是限制插入和删除都只能在一个位置上进行的表. 2.图示 3.栈的基本功能 (1)是否为空 (2)进栈 (3)出栈 (4)清空 (5)取栈顶 二.栈的链表实现 # ...

  7. Enter直接登录

    2.2  按Enter键调用登录按钮 [实例描述] 为了方便用户操作,在登录邮箱或论坛时,如果用户输入了用户名和密码,按Enter键时,都会自动调用登录按钮.本例学习如何实现此功能. [实现代码] & ...

  8. CodeForces 304C

    E - E Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  9. JVM常用参数配置

    Trace跟踪参数 -verbose:gc -XX:+printGC 打印GC的简要信息 -XX:+PrintGCDetails 打印GC详细信息 -XX:+PrintGCTimeStamps 打印C ...

  10. POJ3764 The xor-longest Path（Trie树）

    题目给一棵有边权的树,问树上任意两点路径上的边异或值最多是多少. 记录每个点u到根路径的异或值xor[u],那么任意两点u.v路径的异或值就是xor[u]^xor[v]. 于是这个问题就变成了从n个数 ...