setTimeout()方法和setInterval()方法

時間 2019-11-09

標籤 settimeout 方法 setinterval 简体版

原文原文鏈接

setTimeout方法：html

定義和用法：瀏覽器

setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。函數

tip: 1000 毫秒= 1 秒。spa

tip: 若是你只想重複執行能夠使用setInterval()方法。code

tip: 使用 clearTimeout() 方法來阻止函數的執行。htm

語法：setTimeout(code, milliseconds, param1, param2, ...) blog

返回值：返回一個 ID（數字），能夠將這個ID傳遞給 clearTimeout() 來取消執行。ip

實例：utf-8

//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：第二、四、6秒修改輸入框中的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>點擊按鈕，在第 二、四、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()方法get

定義和用法：

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。