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. 【转载】 linux系统dig和nslookup的安装

    原文地址: https://blog.csdn.net/bjbs_270/article/details/7003088 --------------------------------------- ...

  2. linux中c语言和php语言通信代码UDP&TCP

    linux中c语言和php语言通信代码UDP&TCP http://blog.chinaunix.net/uid-24015214-id-2644174.html UDP方式通信   服务器端 ...

  3. 算法习题---4-8特别困的学生（UVa12108）

    一:题目 课堂上有n个学生(n<=),每个学生上课都会出现一个“清醒-睡眠”周期,其中第i个学生学习Ai分钟后睡眠Bi分钟,依次重复.其中在从清醒到睡眠时有一个条件:只有到全班睡眠人数大于清醒人 ...

  4. 【Mybatis】MyBatis之整合Spring（八）

    创建环境 系统:macOS Java:1.8 软件:eclipse,maven,mysql 创建步骤 本例:创建一个Maven项目(SpringMVC+Spring+Mybatis),页面上展示员工列 ...

  5. Qt编写气体安全管理系统22-报警联动

    一.前言 报警联动功能不是一个常规的功能,一般是给客户定制的功能,比如探测器采集到的数据报警了,不仅本地要播放报警声音,存储报警记录,发送报警短信和邮件,还需要触发警号面板灯进行报警,而警号面板指示灯 ...

  6. js中的eval方法

    eval(string) eval函数接收一个参数string,如果string不是字符串,则直接返回string.否则执行string语句.如果string语句执行结果是一个值,则返回此值,否则返回 ...

  7. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  8. FastDFS配置详解之Storage配置

    1 基本配置disabled #func:该配置文件是否生效#valu:## true:无效## false:生效disabled=false group_name#func:本storage ser ...

  9. 【C# 开发技巧】 c#窗体关于调试界面和运行界面不一样的原因之一

    如下图所示: 原因是因为主窗体属性AutoScaleMode设置为:Font了: 按自己需求将AutoScaleMode设置修改即可. 另外一个可能是系统显示-缩放与布局-要调整到100% 如下图:

  10. 基于libuv的TCP设计（一）

    本人一直在寻找一个跨平台的网络库,boost与ACE比较庞大,不考虑.对比了libevent,libev,libuv后,最终选择了libuv.可libuv文档少,例子也简单,对于tcp只有个echo- ...