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. Zabbix3.4指定用户才能收到报警的配置

    Zabbix3.4指定用户才能收到报警的配置 .下载python微信脚本 #安装simplejson wget https://pypi.python.org/packages/f0/07/26b51 ...

  2. IDEA 修改某个Module名称

    一.选择module右键——>Refactor——>Rename 二.修改该module下的pom.xml文件对应module名改掉 三.修改项目的pom文件中modules里的modul ...

  3. mac中matplotlib不支持中文的解决办法

    参考:https://blog.csdn.net/kaizei_pao/article/details/80795377 首先查看matplotlib已加载的字体: import matplotlib ...

  4. 013-docker-安装-Centos7

    1.搜索镜像 docker search centos 2.拉取合适镜像 选择合适tag:https://hub.docker.com/,下载合适版本 docker pull centos:6.6 d ...

  5. AndroidKiller简单使用：修改应用名称

    修改apk名称 软件清晰地展示了美柚的信息.(是反编译的不错选择) 切换到工程管理器,可以查看反编译的资源和smail代码等. 接下来,查看smali代码,找到你需要查看的文件,点击下图的这个图标 看 ...

  6. 关于Js异常

    一.Javascript的异常处理机制 当javascript代码中出现错误的时候,js引擎就会根据js的调用栈逐级寻找对应的catch,如果没有找到相应的catch handler或catch ha ...

  7. CRC校验的问题（c语言实现CRC校验和）

    1. 前面的数 7A 01 00,计算的结果是0X4920 2. 那么把数据CRC加上 3. 测试代码,计算出来的结果对不上,什么情况?可是我把参考模型的全部都选了一遍,也对不上其中一个!!! 4.  ...

  8. 一个容器多个进程，一个pod多个容器

    一个容器多个进程:在Docker的镜像编译脚本Dockerfile中带起多个进程,如下可以在contivNet.sh中启动多个进程 FROM 10.37.210.125:5001/suning/cen ...

  9. 微信小程序填坑,wx.request() 内调用setData()方法错误的解决办法

    再方法内添加一行代码,把this对象赋值给给一个变量供success()方法内调用 核心代码: var v = this.txt; 完整示例 abc:function(e){//该函数用于和后台交互 ...

  10. Spyder中代码提示功能添加

    问题描述:Spyder中编写python程序时,无函数智能提示.如想要输入np.reshape,无reshape提示 预期目标:输入 np.  然后智能提示reshape 解决方法: 第一步:进入本地 ...