js-webapi-消息提示功能案例(鼠标移入移除事件)

87 阅读 0 评论 58 点赞

我是靠谱客的博主瘦瘦仙人掌，最近开发中收集的这篇文章主要介绍js-webapi-消息提示功能案例(鼠标移入移除事件)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

消息提示功能需求思路：

1.弹出，2秒自动消失
2.如果鼠标进入，不消失
3.如果鼠标移开，32秒之后消失

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tip {
        max-width: 200px;
        padding: 10px 20px;
        background-color: rgba(0, 0, 255, 0.2);
        margin: 200px auto;
        border-radius: 5px;
        text-align: center;
        display: none;
      }
    </style>
  </head>
  <body>
    <button>登录</button>
    <div class="tip"></div>
    <script>
      let btn = document.querySelector("button");
      let tip = document.querySelector(".tip");

      btn.addEventListener("click", function () {
        tip.innerText = "登录成功";
        tip.style.display = "block";

        // 2秒后自动消失
        let timerId = setTimeout(function () {
          tip.style.display = "none";
        }, 2000);

        tip.addEventListener("mouseenter", function () {
          clearTimeout(timerId);
        });

        tip.addEventListener("mouseleave", function () {
          timerId = setTimeout(function () {
            tip.style.display = "none";
          }, 2000);
        });
      });
    </script>
  </body>
</html>