页面中实现setInterval和setTimeout效果示例详解

让我为你讲解一下“页面中实现setInterval和setTimeout效果示例详解”的完整攻略吧！

一、setInterval与setTimeout的基本使用

1. setInterval的基本使用

setInterval可以设置周期性地执行指定的代码。其语法如下：

setInterval(func, delay, [arg1, arg2, ...]);

其中，func是要执行的函数，delay是周期时间（以毫秒为单位），[arg1, arg2, ...]是传递给函数的参数列表（可选）。该方法会返回一个数字ID，表示该定时器的唯一标识符。

示例代码如下：

<div id="time"></div>
<script>
var i = 0;  //计数器
var timer = setInterval(function(){
    i++;  //计数器自增
    document.getElementById("time").innerHTML = i;  //显示计数器的值
}, 1000);  //每隔1秒执行一次
</script>

上述代码定义了一个计数器变量i，然后使用setInterval周期性地对其进行自增操作，并更新页面中的显示。这样，页面中就会显示每秒递增的数字。

2. setTimeout的基本使用

setTimeout可以在指定的时间后执行一次指定代码。其语法如下：

setTimeout(func, delay, [arg1, arg2, ...]);

其中，func是要执行的函数，delay是延迟时间（以毫秒为单位），[arg1, arg2, ...]是传递给函数的参数列表（可选）。该方法会返回一个数字ID，表示该定时器的唯一标识符。

示例代码如下：

<div id="msg">Hello World!</div>
<script>
setTimeout(function(){
    document.getElementById("msg").innerHTML = "你好，世界！";  //更新文本内容
}, 3000);  //3秒后执行
</script>

上述代码定义了一个文本内容为“Hello World!”的div元素，然后使用setTimeout在3秒后将其更新为“你好，世界！”字符串。这样，用户在加载页面后3秒，就会看到文本内容的变化。

二、使用定时器实现动画效果

1. 制作无限循环轮廓线效果

下面我们通过一个示例，来演示如何使用setInterval方法制作一个无限循环的动画效果。

实例代码如下：

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");  //获取canvas元素
var ctx = canvas.getContext("2d");  //获取绘图上下文
var r = 0;  //记录圆的半径
var speed = 1;  //圆的变化速度

setInterval(function() {
    if (r > 150 || r <= 0) {  //当圆的半径达到一定值或者为0时，变化方向反转
        speed = -speed;
    }
    r += speed;  //变化半径
    ctx.clearRect(0, 0, 400, 400);  //清空画布
    ctx.beginPath();  //开始绘制圆
    ctx.arc(200, 200, r, 0, Math.PI * 2, false);  //绘制圆形
    ctx.stroke();  //绘制轮廓线
}, 10);  //每10毫秒执行一次
</script>

上述代码定义了一个圆形，通过不断修改其半径r和轮廓线绘制，实现了圆形轮廓线的循环变化动画效果。

2. 制作倒计时效果

下面我们通过一个示例，来演示如何使用setInterval方法制作一个简单的倒计时效果。

实例代码如下：

<div id="time">00:00:10</div>
<script>
var leftTime = 10;  //剩余的时间（秒）
var timer = setInterval(function(){
    leftTime--;  //时间自减
    if (leftTime <= 0) {  //时间到达零时停止定时器
        clearInterval(timer);
        alert("时间到！");
    }
    var strTime = formatTime(leftTime);  //格式化时间
    document.getElementById("time").innerHTML = strTime;  //显示时间
}, 1000);  //每隔1秒执行一次

//将秒数格式化为时间字符串
function formatTime(time) {
    var h = Math.floor(time / 3600);  //计算小时数
    var m = Math.floor((time - h * 3600) / 60);  //计算分钟数
    var s = time % 60;  //计算秒数
    return formatNum(h) + ":" + formatNum(m) + ":" + formatNum(s);
}

//将数字格式化为两位数
function formatNum(num) {
    return num < 10 ? "0" + num : num;
}
</script>

上述代码定义了一个计时器，通过不断修改剩余时间leftTime和格式化时间strTime的方法，实现了倒计时的动画效果。