一个漂亮的网站收藏函数

最新推荐文章于 2024-11-12 17:31:26 发布
妖为邻
最新推荐文章于 2024-11-12 17:31:26 发布
阅读量180
点赞数 3
文章标签： javascript 前端 js
本文链接：https://blog.csdn.net/lulei5153/article/details/139873491
版权
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网站收藏</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f4f4f9;
      color: #333;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #closeButton {
      background-color: #4CAF50;
      color: #fff;
      margin: 0;
      padding: 0px;
    }

    #topRight {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 10px;
      width: 400px;
    }

    h2 {
      text-align: center;
      color: #4CAF50;
    }

    hr {
      border: 0;
      height: 1px;
      background: #e0e0e0;
      margin: 10px 0;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    li {
      text-align: center;
      padding: 10px 20px;
      margin: 5px 0;
      background-color: #eceff1;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    li:hover {
      background-color: #cfd8dc;
    }

    .disabled {
      pointer-events: none;
      color: gray;
      background-color: #eeeeee;
    }
  </style>
</head>

<body>
  <div id="topRight">
    <h2>网站收藏</h2>
    <hr>
    <ul id="webList">
    </ul>
  </div>
  <script>
    function createLinkList() {
      var web = document.getElementById("webList");
      var newWindows = [];
      var links = [
        { title: "关闭全部新窗口", id: "closeButton" },
        { title: "CSDN博客", src: "https://blog.csdn.net/lulei5153" },
        { title: "智能翻译", src: "https://fanyi.baidu.com" },
        { title: "哔哩哔哩", src: "https://www.bilibili.com" },
        { title: "百度一下，你就知道", src: "https://www.baidu.com" },
        { title: "菜鸟教程", src: "https://www.runoob.com/" },
        { title: "Electron中文网", src: "https://www.electronjs.org/zh/docs/latest/" },
        { title: "制作ico图标", src: "https://www.bitbug.net" },
        { title: "Element组件", src: "https://element-plus.org/zh-CN/" },
        { title: "原神大地图", src: "https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&lang=zh-cn&utm_source=bbs&utm_medium=mys&utm_campaign=pcicon&_markerFps=24#/map/2?shown_types=NaN,-1084,508,2&center=2008.50,-1084.00&zoom=-3.00" },
        { title: "vue.js", src: "https://cn.vuejs.org/" },
        { title: "w3schools教程", src: "https://www.w3ccoo.com/" },
        { title: "现代JS教程", src: "https://zh.javascript.info/" },
        { title: "CSS3D字体", src: "https://www.dedexuexi.com/tool/3D/" },
        { title: "MDN网络文档", src: "https://developer.mozilla.org/zh-CN/" },
        { title: "UI组件", src: "https://uiverse.io/switches" },
        { title: "IconFont图标", src: "https://www.iconfont.cn/" },
        { title: "GitHub", src: "https://github.com" },
      ];
      for (var i = 0; i < links.length; i++) {
        var li = document.createElement('li');
        li.textContent = links[i].title;
        (function (src, id) {
          if (id === "closeButton") {
            li.id = id;
            li.onclick = function () {
              closeAllWindows();
            }
            // 在这里插入分隔线
            var hr = document.createElement('hr');
            li.appendChild(hr);
            return;
          }
          if (!src) {
            li.classList.add('disabled');
            return;
          }
          li.onclick = function () {
            const newWindow = window.open(src, "_blank", "width=900,height=680,top=200,left=400");
            if (newWindow) {
              newWindows.push(newWindow);
              newWindow.focus();
            }
          };
        })(links[i].src, links[i].id);
        web.appendChild(li);
      }
      function closeAllWindows() {
        for (var i = 0; i < newWindows.length; i++) {
          if (newWindows[i] && !newWindows[i].closed) {
            newWindows[i].close();
          }
        }
        newWindows = [];
      }
    }
    createLinkList();
  </script>
</body>

</html>