JS实现提示效果弹出及延迟隐藏的功能

JS实现提示效果的弹出及延迟隐藏功能，可以通过以下步骤来完成：

步骤一：创建提示框HTML结构

首先，我们需要创建一个提示框的HTML结构，可以使用div标签模拟弹出框，也可以使用ul或者table标签，此处以使用div标签为例。

<div id="tip-box" style="display:none;">
  <div class="tip-content">这里是提示框的内容</div>
  <div class="tip-close">×</div>
</div>

在上面的HTML结构中，id为“tip-box”的的div标签表示提示框的容器，style属性中的"display:none;"表示初始状态为隐藏；div中的“tip-content”表示提示框的内容区域，而“tip-close”表示提示框右上角的关闭按钮。

步骤二：编写CSS样式

接下来，我们需要编写一些CSS样式，来美化提示框的外观，比如修改背景色、边框颜色、文字颜色、位置等等。

#tip-box {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  top: 50px;
  left: 150px;
}

.tip-content {
  line-height: 1.5em;
  padding-bottom: 10px;
}

.tip-close {
  cursor: pointer;
  float: right;
  color: #ccc;
  font-weight: bold;
}

在上述CSS代码中，我们为提示框的容器添加了一些基本样式，比如设置了padding、背景色以及边框颜色，并设置了提示框的位置为绝对定位并在上方离页面顶部50个像素，同时我们还设置了关闭按钮的颜色、鼠标样式等样式内容。

步骤三：编写JavaScript代码

好了，现在我们已经完成了HTML和CSS的创建，在JS中我们需要完成以下功能：

• 点击某个按钮或链接时，提示框弹出
• 延迟一段时间后提示框自动隐藏
• 点击关闭按钮或提示框以外的地方时，提示框隐藏

以下是我们需要编写的JS代码：

var tipBox = document.getElementById('tip-box');
var closeBtn = document.querySelector('.tip-close');

// 点击按钮，显示提示框
document.getElementById('show-btn').addEventListener('click', function(){
    tipBox.style.display = 'block';
});

// 延迟一段时间后，自动隐藏提示框
setTimeout(function(){
    tipBox.style.display = 'none';
}, 5000);

// 点击关闭按钮，隐藏提示框
closeBtn.addEventListener('click', function(){
    tipBox.style.display = 'none';
});

// 点击提示框以外的区域，隐藏提示框
window.addEventListener('click', function(e){
    if (e.target == tipBox) {
        tipBox.style.display = 'none';
    }
});

在上述代码中，我们首先获取了提示框容器和关闭按钮的元素，然后使用事件监听器为"show-btn"按钮添加了一个点击事件，当按钮被点击时，提示框将显示出来。接着，我们使用setTimeout函数实现了一个延迟隐藏的效果，该函数在5秒后自动将提示框隐藏。最后，我们为关闭按钮和页面中任何位置的点击事件添加了事件监听器，当关闭按钮或提示框以外的位置被点击时，也会隐藏提示框。

示例一： 悬浮按钮实现提示框弹出及延迟隐藏的功能

<button id="show-btn">Show tip box</button>
<div id="tip-box" style="display:none;">
  <div class="tip-content">这是一个提示框：内容如下......</div>
  <div class="tip-close">×</div>
</div>

<script>
  var tipBox = document.getElementById('tip-box');
  var closeBtn = document.querySelector('.tip-close');

  //鼠标移入悬浮按钮，显示提示框
  document.getElementById('show-btn').addEventListener('mouseenter',function(){
    tipBox.style.display = 'block';
  });

  //鼠标移出悬浮按钮，延迟一段时间后，自动隐藏提示框
  document.getElementById('show-btn').addEventListener('mouseleave',function(){
    setTimeout(function(){
      tipBox.style.display = 'none';
    }, 2000);
  });

  // 点击关闭按钮，隐藏提示框
  closeBtn.addEventListener('click', function(){
    tipBox.style.display = 'none';
  });

  // 点击提示框以外的区域，隐藏提示框
  window.addEventListener('click', function(e){
    if (e.target == tipBox) {
      tipBox.style.display = 'none';
    }
  });
</script>

在示例一中，我们在页面中添加了一个“Show tip box”的按钮，当鼠标移动到按钮上时，提示框会弹出并在鼠标移出按钮2秒后自动隐藏。

示例二：表单验证实现提示框弹出及延迟隐藏的功能

<form action="#">
  <label for="username">用户名：</label>
  <input type="text" id="username">
  <button id="submit-btn" type="submit">提交</button>
</form>

<div id="tip-box" style="display:none;">
  <div class="tip-content">用户名不能为空</div>
  <div class="tip-close">×</div>
</div>

<script>
  var tipBox = document.getElementById('tip-box');
  var closeBtn = document.querySelector('.tip-close');
  var submitBtn = document.getElementById('submit-btn');

  //点击提交按钮，如果用户名为空则提示框弹出
  submitBtn.addEventListener('click', function(e){
    e.preventDefault();//默认提交行为禁止
    var username = document.getElementById('username');
    if(username.value === ''){
      tipBox.style.display = 'block';
      //延迟一段时间后，自动隐藏提示框
      setTimeout(function(){
        tipBox.style.display = 'none';
      }, 2000);
    }
  });

  // 点击关闭按钮，隐藏提示框
  closeBtn.addEventListener('click', function(){
    tipBox.style.display = 'none';
  });

  // 点击提示框以外的区域，隐藏提示框
  window.addEventListener('click', function(e){
    if (e.target == tipBox) {
      tipBox.style.display = 'none';
    }
  });
</script>

在示例二中，我们添加了一个表单，在提交表单时，我们会检查用户名是否为空，若为空，则提示框弹出并在2秒后自动隐藏。