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

最新推荐文章于 2023-02-16 17:23:53 发布

麻瓜呀

最新推荐文章于 2023-02-16 17:23:53 发布

阅读量441

点赞数

分类专栏： js基础语法 webpack笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_41421033/article/details/124529337

版权

js基础语法同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

webpack笔记

3 篇文章 0 订阅

订阅专栏

消息提示功能需求思路：

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>

麻瓜呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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="w
复制链接

扫一扫