js Loading 遮罩层

微八度

已于 2023-12-22 15:34:28 修改

阅读量381

点赞数 6

分类专栏： Javascript 文章标签： javascript

于 2023-11-24 14:47:14 首次发布

本文链接：https://blog.csdn.net/V_WeiXiao/article/details/134598653

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
  <head> </head>
  <body>
    <button onclick="test()">显示遮罩层</button>

    <script>
      function loading(t = "loading...") {
        let d_id = "loading";
        let msg_id = "loadingMsg";
        let d = document.getElementById(d_id);
        if (d) {
          document.getElementById(msg_id).innerText = t;
          d.removeAttribute("hidden");
        } else {
          d = document.createElement("div");
          d.id = d_id;
          d.style.position = "absolute";
          d.style.top = "0";
          d.style.left = "0";
          d.style.width = "100%";
          d.style.height = "100%";
          d.style.backgroundColor = "#777";
          d.style.opacity = 0.6;
          d.style.zIndex = 9998;
          let msg = document.createElement("div");
          msg.id = msg_id;
          msg.style.position = "absolute";
          msg.style.top = "35%";
          msg.style.left = "42%";
          msg.style.backgroundColor = "white";
          msg.style.border = "#336699 1px solid";
          msg.style.textAlign = "center";
          msg.style.fontSize = "1.1em";
          msg.style.fontWeight = "bold";
          msg.style.padding = "0.5em 3em";
          msg.style.zIndex = 9999;
          msg.innerText = t;
          d.appendChild(msg);
          document.body.appendChild(d);
        }
      }
      function hideLoading() {
        let d = document.getElementById("loading");
        if (d) {
          d.setAttribute("hidden", true);
        }
      }

      function test() {
        loading();
        setTimeout(() => hideLoading(), 3000);
      }
    </script>
  </body>
</html>