setTimeout方法：

定义和用法：

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

tip: 1000 毫秒= 1 秒。

tip:  如果你只想重复执行可以使用setInterval()方法。

tip: 使用 clearTimeout() 方法来阻止函数的执行。

语法：setTimeout(code, milliseconds, param1, param2, ...)

返回值：返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

实例：

//eg1：三秒后弹出“HELLO”

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮，3 秒后会弹出 "Hello"。</p>

<button onclick="myFunction()">点我</button>

<script>

var myVar;

function myFunction() {

    myVar = setTimeout(alertFunc, 3000);

}

function alertFunc() {

  alert("Hello!");

}

</script>

</body>

</html>

//eg2：第2、4、6秒修改输入框中的文本：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮，在第 2、4、6 秒修改输入框中的文本：</p>

<button onclick="timedText()">显示时间文本</button>

<input type="text" id="txt">

<script>

function timedText() {

    var x = document.getElementById("txt");

    setTimeout(function(){ x.value="2 秒" }, 2000);

    setTimeout(function(){ x.value="4 秒" }, 4000);

    setTimeout(function(){ x.value="6 秒" }, 6000);

}

</script>

</body>

</html>

//eg3：打开一个新窗口，3 秒后将该窗口关闭

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>打开一个新窗口，3 秒后将该窗口关闭:</p>

<button onclick="openWin()">打开 "窗口"</button>

<script>

function openWin() {

    var myWindow = window.open("", "", "width=200, height=100");

    myWindow.document.write("<p>这是一个新窗口'</p>");

    setTimeout(function(){ myWindow.close() }, 3000);

}

</script>

</body>

</html>

//eg4计数器 -- 可以通过点击按钮停止：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮，等待 3 秒后弹出 "Hello" 。</p>

<p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 3 秒前点击)</p>

<button onclick="myFunction()">先点我</button>

<button onclick="myStopFunction()">阻止弹出</button>

<script>

var myVar;

function myFunction() {

    myVar = setTimeout(function(){ alert("Hello") }, 3000);

}

function myStopFunction() {

    clearTimeout(myVar);

}

</script>

</body>

</html>

//显示当前时间

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body onload="startTime()">

<div id="txt"></div>

<script>

function startTime() {

    var today = new Date();

    var h = today.getHours();

    var m = today.getMinutes();

    var s = today.getSeconds();

    // 在 numbers<10 的数字前加上 0

    m = checkTime(m);

    s = checkTime(s);

    document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;

    var t = setTimeout(function(){ startTime() }, 500);

}

function checkTime(i) {

    if (i < 10) {

        i = "0" + i;

    }

    return i;

}

</script>

</body>

</html>

//eg5传递参数给 alertFunc 函数

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>点击按钮 2 秒后输出 "Hello"。</p>

<p>实例中，我们也会输出传递给 alertFunc() 函数的参数 ( 兼容所有浏览器 )。</p>

<button onclick="myStartFunction()">开始</button>

<p id="demo"></p>

<p id="demo2" style="color:red;"></p>

<script>

var myVar;

function myStartFunction() {

    myVar = setTimeout(function(){ alertFunc("Runoob", "Google"); }, 2000);

}

function alertFunc(param1, param2) {

    document.getElementById("demo").innerHTML += "Hello ";

    document.getElementById("demo2").innerHTML = "传递给 alertFunc() 的参数: <br>"

    + param1 + "<br>" + param2 + "<br>";

}

</script>

</body>

</html>

setInterval()方法

定义和用法：

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：setInterval(code, milliseconds);

实例：

//显示当前时间( setInterval() 方法会每秒执行一次函数，类似手表功能):
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>显示当前时间:</p>

<p id="demo"></p>

<script>

var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {

    var d = new Date();

    var t = d.toLocaleTimeString();

    document.getElementById("demo").innerHTML = t;

}

</script>

</body>

</html>
//使用 setInterval() 和 clearInterval()来创建动态进度条：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<style>

#myProgress {

  width: 100%;

  height: 30px;

  position: relative;

  background-color: #ddd;

}

#myBar {

  background-color: #4CAF50;

  width: 10px;

  height: 30px;

  position: absolute;

}

</style>

<body>

<h1>JavaScript 进度条</h1>

<div id="myProgress">

  <div id="myBar"></div>

</div>

<br>

<button onclick="move()">点我</button> 

<script>

function move() {

  var elem = document.getElementById("myBar");

  var width = 0;

  var id = setInterval(frame, 10);

  function frame() {

    if (width == 100) {

      clearInterval(id);

    } else {

      width++;

      elem.style.width = width + '%';

    }

  }

}

</script>

</body>

</html>

//每 300 毫秒切换背景颜色：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<p>以下实例中，setInterval() 方法每 300 毫秒执行 setColor() 函数 ，该函数可以切换背景颜色。</p>

<button onclick="stopColor()">停止切换</button>

<script>

var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {

  var x = document.body;

  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";

}

function stopColor() {

  clearInterval(myVar);

}

</script>

</body>

</html>

setTimeout()方法和setInterval()方法的更多相关文章

  1. ASP.NET Core 中文文档 第二章 指南（4.10）检查自动生成的Detail方法和Delete方法

    原文 Examining the Details and Delete methods 作者 Rick Anderson 翻译 谢炀(Kiler) 校对 许登洋(Seay).姚阿勇(Mr.Yao) 打 ...

  2. ThinkPHP的D方法和M方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  3. Hibernate中evict方法和clear方法说明

    Hibernate中evict方法和clear方法说明 先创建一个对象,然后调用session.save方法,然后调用evict方法把该对象清除出缓存,最后提交事务.结果报错: Exception i ...

  4. Android HTTP实例 使用GET方法和POST方法发送请求

    Android HTTP实例 使用GET方法和POST方法发送请求 Web程序:使用GET和POST方法发送请求 首先利用MyEclispe+Tomcat写好一个Web程序,实现的功能就是提交用户信息 ...

  5. virtual方法和abstract方法

    在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...

  6. JavaScript indexOf() 方法和 lastIndexOf() 方法

    一,定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索 ...

  7. wait方法和sleep方法的区别

    一.概念.原理.区别 Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:可运行,运行,阻塞,死亡.抢占式机制指的是有多个线程处于可运行状态,但是只有一个线程在运行.      ...

  8. M方法和D方法的区别

    M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...

  9. ThinkPHP 中M方法和D方法详解----转载

    转载的地址,http://blog.163.com/litianyichuanqi@126/blog/static/115979441201223043452383/ 自己学到这里的时候,不能清除的分 ...

随机推荐

  1. ISO/IEC 9899:2011 条款6.5.9——相等操作符

    6.5.9 相等操作符 语法 1.equality-expression: relational-expression equality-expression    ==    relational- ...

  2. 内存检测工具valgrind的安装和简单使用

    1. 安装 .tar.bz2 cd valgrind- sudo ./configure sudo make sudo make install 2. 简单使用 #include <stdio. ...

  3. Spring cloud微服务安全实战-3-10API安全机制之授权

    说一下最后一个模块,授权.用来做访问控制,控制哪个用户能干什么.哪个用户不能干什么? 遵循最小的授权原则,一个用户只给他必须要的那些权限. 1.你的请求是不是需要权限认证, 有一些请求是根本不需要权限 ...

  4. 算法习题---5.6团体队列（Uva540）

    一:题目 有t个队伍的人正在排队,每次新来一个人,如果他有队友在排队,那他可以插队,直接排到他的队伍的末尾.如果没有队伍在前面,那么他直接排在长队的末尾 ENQUEUE x 将编号x的队员入队 DEQ ...

  5. Zabbix 3.2.6-Mysql多实例监控-Percona Monitoring Plugins自动发现

    mysql多实例监控实录   系统环境: cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 内核版本: uname -r 3.1 ...

  6. Python - Django - 命名 URL 和反向解析 URL

    命名 URL: test.html: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. jenkins升级完后一直显示升级中

    这个时候是已经升级成功了的,刷新界面,从新登录即可

  8. LODOP粒度TableRowThickNess合并行测试

    之前的博文:LODOP打印table不切行TableRowThickNess. ,中是没有合并行等的表格,通过设置增大分页粒度,会找附近的表格线,然后根据表格线分页,避免了切行.如果有比较复杂的表格, ...

  9. 【转】do...while(0)的妙用

    前言 今天无意中看到这个标题,因为好奇就点进去了,不错,又学习啦... 具体内容: 1. do...while(0)消除goto语句: 2 宏定义中的do...while(0): 参考 1. 原链接_ ...

  10. C# Hook原理及EasyHook

    C# Hook原理及EasyHook简易教程 前言 在说C# Hook之前,我们先来说说什么是Hook技术.相信大家都接触过外挂,不管是修改游戏客户端的也好,盗取密码的也罢,它们都是如何实现的呢? 实 ...