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. shell编程系列7--shell中常用的工具find、locate、which、whereis

    shell编程系列7--shell中常用的工具find.locate.which.whereis .文件查找之find命令 语法格式:find [路径] [选项] [操作] 选项 -name 根据文件 ...

  2. PHP 小程序发模板消息

    记录一下DEMO <?php function getAccessToken ($appid, $appsecret) { $url='https://api.weixin.qq.com/cgi ...

  3. Spring5源码分析之启动类的相关接口和注解

    一些基础但是核心的知识总结: Spring Boot项目启动的时候需要加@Configuration. @ComponentScan @Configuration + @Bean 把第三方jar包注入 ...

  4. Linux记录-批量更改当前目录的文件后缀名

    #!/bin/bash path=. for file in $(ls $path) do if [ -f $file ] then filename=${file%.*} bak=${file#*. ...

  5. Python - Django - session 的基本使用

    urls.py: from django.conf.urls import url from app02 import views urlpatterns = [ # app02 url(r'^app ...

  6. 解决软件卸载时Abstract: "Invalid serial number" xe4

    In RAD Studio, Delphi, C++Builder, XE4 there can become a scenario if you try to modify, repair, upg ...

  7. PHPStudy后门事件分析

    PHP环境集成程序包phpStudy被公告疑似遭遇供应链攻击,程序包自带PHP的php_xmlrpc.dll模块隐藏有后门.经过分析除了有反向连接木马之外,还可以正向执行任意php代码. 影响版本 P ...

  8. TestCase--网站创建新用户管理模块

    对于web测试,用户权限管理模块是必测的一个点,所以今天就来总结一下创建新用户管理模块的测试用例 参考图如下: 测试用例设计如下: 一.功能测试 1.  什么都不输入,单击“立即提交”,页面是否有提示 ...

  9. 克隆指定的分支：git clone -b 分支名仓库地址

    克隆指定的分支:git clone -b 分支名仓库地址 git clone -b 分支名 仓库地址 -b 是在克隆的时候制定一个分支

  10. 使用video.js 7在html中播放rtmp视频流

    1.背景 最近要做摄像头视频的展示,不想使用硬件方的专用插件,所以计划视频推送到SRS服务器,浏览器再通过rtmp协议显示,类似于直播. 经查询,了解到可以用ckplayer(有许可条款)和video ...