首页 > 其他分享> > 两种定时器setTimeout()方法和 setInterval()方法

两种定时器setTimeout()方法和 setInterval()方法

2020-10-29 08:03:35 作者：互联网

一、setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。本人一般用户倒计时或定时结束某件事情

1,调方法，第一参数是方法名，第二参数是毫秒数，表示三秒后执行alertFunc方法，只执行一次。

var myVar;

function myFunction() {

　　 myVar = setTimeout(alertFunc, 3000);

}

function alertFunc() {

　　 alert("Hello!");

}

2，第一个参数直接写要执行的代码，第二个参数是毫秒数，过毫秒数执行一次。例：打开一个新窗口，3 秒后将该窗口关闭

var myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<p>这是一个新窗口'</p>");
setTimeout(function(){ myWindow.close() }, 3000)

3，实现计时器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>把兰舟弃了</title>
</head>
<body>

<button onclick="startCount()">开始计数!</button>
<input type="text" id="txt">
<button onclick="stopCount()">停止计数!</button>

<p>
点击 "开始计数!" 按钮开始执行计数程序。输入框从 0 开始计算。 点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会重新开始计数。
</p>

<script>
var c = 0;
var t;
var timer_is_on = 0;

function timedCount() {
    document.getElementById("txt").value = c;
    c = c + 1;
    t = setTimeout(function(){ timedCount() }, 1000);
}

function startCount() {
    if (!timer_is_on) {
        timer_is_on = 1;
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on = 0;
}
</script>

</body>
</html>

4，显示时间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>把兰舟弃了</title>
</head>
<body onl oad="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>

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

1、每三秒执行一次

setInterval(function(){ alert("Hello"); }, 3000);

2、使用一个代码字符串

setInterval('alert("Hello");', 3000);

3、显示当前时间

<!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.getTime();
    document.getElementById("demo").innerHTML = t;
}
</script>

</body>
</html>

4、使用 clearInterval() 来停止 setInterval 的执行

var myVar = setInterval(function(){ myTimer() }, 1000);
 
function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}
 
function myStopFunction() {
    clearInterval(myVar);
}

5、进度条

<!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>

标签：function,定时器,myVar,计数,setInterval,width,var,setTimeout
来源： https://www.cnblogs.com/gongwangwang/p/13894585.html