js定时器完成淡入淡出

可以使用JavaScript的定时器和CSS的opacity属性来实现淡入淡出的效果。

首先，需要在HTML中添加一个元素，如下所示：

<div id="fade-in-out">Hello World</div>

然后，在CSS中设置该元素的opacity属性为0，即完全透明：

#fade-in-out {
  opacity: 0;
}

接下来，可以使用JavaScript的定时器来控制该元素的opacity属性从0到1（淡入）或从1到0（淡出）的过渡效果。代码如下：

// 获取要淡入淡出的元素
var fadeElement = document.getElementById('fade-in-out');

// 定义变量，用于控制淡入淡出效果的速度
var fadeSpeed = 20;

// 定义变量，用于存储当前元素的透明度
var currentOpacity = 0;

// 定义函数，用于淡入效果
function fadeIn() {
  // 判断当前透明度是否小于1，如果小于1则继续增加透明度
  if (currentOpacity < 1) {
    currentOpacity += 0.01;
    // 设置元素的透明度
    fadeElement.style.opacity = currentOpacity;
    // 使用定时器，每隔fadeSpeed毫秒执行一次fadeIn函数
    setTimeout(fadeIn, fadeSpeed);
  }
}

// 定义函数，用于淡出效果
function fadeOut() {
  // 判断当前透明度是否大于0，如果大于0则继续减少透明度
  if (currentOpacity > 0) {
    currentOpacity -= 0.01;
    // 设置元素的透明度
    fadeElement.style.opacity = currentOpacity;
    // 使用定时器，每隔fadeSpeed毫秒执行一次fadeOut函数
    setTimeout(fadeOut, fadeSpeed);
  }
}

// 调用淡入函数
fadeIn();

// 使用定时器，延时1000毫秒后调用淡出函数
setTimeout(fadeOut, 1000);

以上代码会让元素在页面加载后淡入，然后再延迟1秒后淡出。可以根据实际需求调整淡入淡出的速度和延时时间。