Electron快速入门（三）:在（二）的基础上修改了一个文件夹做了个备忘录

发布于：2024-06-29 ⋅ 阅读:(15) ⋅ 点赞:(0)

Lingering Memories 诗绪萦怀

修改index.html

<!--index.html-->
<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="width=device-width, initial-scale=1.0">
  <title>空空我啊</title>
  <!-- <link rel="stylesheet" href="./src/style.css"> -->
  <style>
    /* 格式化样式 */
    * {
      margin: 0;
      padding: 0;
      /* box-sizing: border-box; */
      /* 防止用户选中文本 */
      user-select: none;
    }
 
    body {
      width: 100vw;
      height: 100vh;
      background: #2c3e50;
      /* 溢出隐藏 */
      overflow: hidden;
    }
 
    /* title-bar自定义标题栏  */
    .title-bar {
      width: 100vw;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff9c;
      -webkit-app-region: drag;
 
      .logo {
        img {
          width: 30px;
          height: 30px;
          margin: 6px 0 0px 5px;
          -webkit-app-region: no-drag;
          transition: transform 0.3s ease;
 
          &:hover {
            transform: scale(1.2);
          }
        }
      }
 
      #time {
        font-size: 1.5rem;
        background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
        /*将背景剪切成文字的形状*/
        background-clip: text;
        -webkit-background-clip: text;
        /*文字颜色设为透明，使文字与背景融为一体*/
        -webkit-text-fill-color: transparent;
        /* 设置字体粗细 */
        font-weight: 900;
        text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
 
        sub {
          /* font-size: 1rem; */
          text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
        }
      }
 
      iframe {
        -webkit-app-region: no-drag;
      }
 
      .window-btn {
        display: flex;
        min-width: 110px;
 
        i {
          cursor: pointer;
 
          img {
            width: 30px;
            height: 30px;
            -webkit-app-region: no-drag;
            transition: transform 0.3s ease;
            margin: 6px 0 0px 5px;
 
            &:hover {
              background-color: hsla(0, 0%, 40%, 0.68);
              transform: scale(1.2);
            }
          }
        }
      }
    }
 
    /* 自定义标题栏 结束 */
    /* content内容区 开始 */
    li {
      list-style: none;
    }
 
    a {
      text-decoration: none;
      color: hsla(160, 100%, 37%, 1);
      text-shadow: 1px 1px 1px rgb(0, 0, 0);
 
      &:hover {
        background-color: #ebf303;
        color: #f30303;
      }
    }
 
 
 
    button {
      box-shadow: 0 0 5px rgba(255, 254, 254, 0.5);
      cursor: pointer;
    }
 
    button:hover {
      background-color: #f3d303;
    }
 
 
 
    #content {
      display: flex;
      width: 100vw;
    }
 
    #content h2 {
      text-align: center;
      margin-top: 10px;
    }
 
    #centre {
      width: 85vw;
      height: 96vh;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
 
    .displayBtn {
      display: flex;
      color: #E6A23C;
      background-color: #67c23a79;
      border: none;
      text-align: center;
    }
 
    .displayBtn i {
      width: 100%;
      color: chartreuse;
      cursor: pointer;
 
      &:hover {
        background-color: #f3d303;
        color: blueviolet;
      }
    }
 
 
 
    #hidden {
      display: none;
      flex-direction: column;
      position: fixed;
      transform: translate(5%, 15%);
      border-radius: 8px;
      background-color: rgba(0, 0, 0, 0.737);
      z-index: 9;
      box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);
    }
 
    #hidden #Drag {
      height: 35px;
      display: flex;
      justify-content: space-between;
      font-size: 1.5rem;
      box-shadow: 0 0 10px rgba(93, 93, 93, 0.537);
      cursor: move;
      color: #fffcfc;
    }
 
    #hidden #Drag p {
      margin: 0 10px;
    }
 
    #hidden #Drag i {
      font-style: normal;
      margin: 0 10px;
      cursor: pointer;
    }
 
    #hidden #Drag i:hover {
      color: #f30303;
    }
 
    #hidden #form {
      display: flex;
      flex-direction: column;
      background-color: rgba(20, 20, 20, 0.5);
      margin: 10px;
      padding: 5px;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(255, 254, 254, 0.5);
      z-index: 10;
    }
 
    #hidden #form sub {
      margin: 10px 0;
      user-select: text;
      color: hsla(160, 100%, 37%, 1);
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);
      text-align: center;
    }
 
    #hidden #form input[type="file"] {
      width: 100%;
      background: #67c23a3e;
    }
 
    #hidden #form div {
      display: flex;
    }
 
    #hidden #form textarea {
      background-color: rgba(20, 20, 20, 0.5);
      color: #fffcfc;
      text-shadow: 1px 1px 1px #000;
      font-size: 20px;
    }
 
    #hidden #form textarea::placeholder {
      text-align: center;
    }
 
    #closeButton {
      background: linear-gradient(to right, #4CAF50, #FF0000);
      color: #f3d303;
      font-weight: bold;
      margin: 0;
      padding: 0;
      cursor: pointer;
 
      &:hover {
        background-color: #f3d303;
        color: #ff0505;
      }
    }
 
    #delete {
      color: #f3d303;
      text-shadow: 1px 1px 1px rgb(0, 0, 0);
      background: #ff0000;
      border: none;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
 
      &:hover {
        background-color: #f3d303;
        color: #ff0505;
      }
    }
 
 
 
    #memo {
      height: 90vh;
      margin: 0 10px;
      border-radius: 10px;
      display: flex;
      align-content: flex-start;
      border: 2px solid rgb(134, 133, 133);
      background-color: #144756;
      font-size: 20px;
      flex-wrap: wrap;
      overflow-x: hidden;
    }
 
    #memo pre,
    #memo span {
      user-select: text;
      color: #1ded39a0;
      margin: 10px;
      border-radius: 5px;
    }
 
    #memo pre:hover,
    #memo span:hover {
      color: #ffffff8c;
    }
 
    #memo sub {
      position: sticky;
      top: 0;
      color: rgb(252, 181, 181);
      text-shadow: 1px 1px 1px #030303;
      box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
      margin: 0 10px;
      user-select: text;
      border-radius: 20px;
    }
 
    .a_href {
      box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
      padding: 2px;
      border-radius: 3px;
    }
 
    .finish {
      background-color: rgb(191, 210, 255);
      color: rgb(255, 250, 250);
      text-shadow: 1px 1px 1px #030303;
      box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
    }
 
    a {
      text-decoration: none;
      color: #ebf704;
    }
 
    #left,
    #right {
      width: 9vw;
      height: 96vh;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      h2 {
        color: #fffcfc;
      }
    }
 
    #localList,
    #webList {
      text-align: center;
      margin-top: 10px;
    }
 
 
 
 
 
    #localList li,
    #webList li {
      margin: 5px;
      font-size: 18px;
      box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
      padding: 2px;
      border-radius: 3px;
      color: hsla(160, 100%, 37%, 1);
      background-color: #ff000000;
      cursor: pointer;
 
    
 
      &:hover {
        background-color: #f3d303;
        color: #ff0505;
      }
    }
 
    /* 内容区 结束 */
  </style>
</head>
 
<body>
  <!--title-bar 自定义标题栏 -->
  <div class="title-bar">
    <a class="logo" href="https://blog.csdn.net/lulei5153" title="与妖为邻CSDN博客" class="" target="_blank">
      <img src="./img/icon.png" alt="与妖为邻" />
    </a>
    <div id="time">当前时间</div>
    <iframe id="tianqi" frameborder="0" width="150" height="36" scrolling="no" hspace="0"
      src="https://i.tianqi.com/?c=code&id=99" style="margin-left: 20px">
    </iframe>
    <div class="window-btn">
      <i id="minimize" onclick="minimize()">
        <img src="/img/最小化.svg" alt="最小化" />
      </i>
      <i id="maximize" onclick="maximize()">
        <img src="./img/最大化.svg" alt="最大化" />
      </i>
      </i>
      <i id="closeMize" onclick="closeMize()">
        <img src="./img/关闭.svg" alt="关闭" />
      </i>
    </div>
  </div>
  <div id="content">
    <div id="left">
      <h2>收藏网站</h2>
      <hr />
      <li id="localList"></li>
    </div>
    <div id="centre">
      <div class="displayBtn">
        <i id="displayBtn">编辑首页页面按钮</i>
        <marquee behavior="alternate" direction="right" id="closeButton"></marquee><i id="delete"> 删除首页页面按钮</i>
      </div>
      <div id="hidden">
        <div id="Drag">
          <p>文本操作</p>
          <i id="closeBtn">&times</i>
        </div>
        <form id="form">
          <input type="file" name="file" accept="text/plain, text/css, text/html, text/javascript, text/markdown"
            class="file" />
          <sub>&lt;a class="a_href" href=" " target="_blank"&gt;&lt;/a&gt;&lt&lt&amp;lt &amp;gt &gt</sub>
          <div>
            <input type="reset" value="重置">
            <textarea class="textarea" name="textarea" rows="10" cols="50%"
              placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
            <button type="button" class="abb-text">添加</button>
          </div>
        </form>
      </div>
      <div id="memo"></div>
      <button id="author">作者：与妖为邻</button>
    </div>
    <div id="right">
      <h2>收藏网站</h2>
      <hr />
      <ul id="webList"></ul>
    </div>
  </div>
  <!-- <script src="./src/renderer.js"></script> -->
</body>
<script>
  /* 当前时间*/
  var current_time = document.getElementById("time");
  function showTime() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var hour = now.getHours();
    var min = now.getMinutes();
    var second = now.getSeconds();
    var arr_work = new Array(
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    );
    var week = arr_work[now.getDay()];
    month = month < 10 ? "0" + month : month; //时间月份个位补0
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    second = second < 10 ? "0" + second : second;
    var time =
      year +
      "-" +
      month +
      "-" +
      day +
      "<sub id='sub'>" +
      week +
      "</sub>" +
      hour +
      ":" +
      min +
      ":" +
      second;
    current_time.innerHTML = time;
  }
  window.setInterval(showTime, 1000);
  showTime();
  /* 当前时间 结束 */
  /*最大化、还原窗口*/
  const maximize = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  };
  /* 最大化、还原窗口结束 */
  /* 关闭窗口*/
  const closeMize = () => {
    window.close();
  };
  /* 关闭窗口结束*/
  /*缩小窗口*/
  let originalSize = { width: window.innerWidth, height: window.innerHeight };
  const minimize = async () => {
    try {
      if (document.fullscreenElement) {
        await document.exitFullscreen();
      }
      window.resizeTo(1, 1);
      window.moveTo(1200, 100);
      createRestoreButton();
    } catch (error) {
      console.error("Error exiting fullscreen: ", error);
    }
  };
 
 
  const createRestoreButton = () => {
    let button = document.createElement("button");
    button.id = "restore";
    button.addEventListener("click", restore);
    document.body.appendChild(button);
    Object.assign(button.style, {
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      backgroundImage: "url('./img/icon.png')",
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center",
      width: "100px",
      height: "100px",
      border: "none",
      cursor: "pointer",
      backgroundColor: "rgba(255, 255, 255, 0)",
    });
  };
  // 恢复窗口到原始大小
  const restore = () => {
    console.log("Restore button clicked");
    window.resizeTo(originalSize.width, originalSize.height);
    let x = screen.width / 2 - 500;
    let y = screen.height / 2 - 300;
    window.moveTo(x, y);
    document.getElementById("restore").remove();
  };
  /*缩小窗口 结束*/
  // 控制隐藏元素显示与否
  var hidden = document.querySelector("#hidden");
  document.getElementById("displayBtn").addEventListener("click", function () {
    hidden.style.display = "block";
  });
  document.getElementById("closeBtn").addEventListener("click", function () {
    hidden.style.display = "none";
  });
 
  // 拖动元素功能
  document.querySelector("#Drag").addEventListener("mousedown", function (e) {
    var x = e.pageX - hidden.offsetLeft;
    var y = e.pageY - hidden.offsetTop;
    function move(e) {
      hidden.style.left = e.pageX - x + "px";
      hidden.style.top = e.pageY - y + "px";
    }
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", function () {
      document.removeEventListener("mousemove", move);
    }, { once: true });
  });
 
  // 处理备忘录
  var upText = document.querySelector(".textarea");
  var addTo = document.querySelector(".abb-text");
  var text = document.querySelector("#memo");
 
  addTo.onclick = function () {
    insertHtml(upText.value, '');
    upText.value = '';
    upText.focus();
    saveTodo();
  };
 
  function saveTodo() {
    let todoArr = Array.from(document.querySelectorAll('.JS_content')).map(content => ({
      name: content.innerHTML,
      finish: content.classList.contains('finish')
    }));
    localStorage.todoText = JSON.stringify(todoArr);
  }
 
  function loadTodo() {
    let todoArr = JSON.parse(localStorage.todoText || "[]");
    todoArr.forEach(todo => {
      insertHtml(todo.name, todo.finish ? 'finish' : '');
    });
  }
 
  text.addEventListener("click", function (event) {
    var tg = event.target;
    var tgKids = tg.parentElement.children;
    if (tgKids[0].checked) {
      tgKids[1].classList.add("finish");
    } else {
      tgKids[1].classList.remove("finish");
    }
    saveTodo();
  });
 
  document.getElementById("delete").addEventListener("click", function () {
    if (confirm("是否删除所选？")) {
      document.querySelectorAll("input[name='checkbox']:checked").forEach(checkbox => {
        checkbox.parentElement.remove();
      });
      saveTodo();
    }
  });
 
  function insertHtml(val, cls) {
    text.insertAdjacentHTML("beforeend",
      `<div class='dddd'>
              <input type="checkbox" name='checkbox'>
              <span class='JS_content ${cls}'>${val}</span>
          </div>`
    );
  }
  // 在页面加载时调用持久化存储的loadTodo()函数
  loadTodo();
  window.onload = function () {
    var text = document.getElementsByName('textarea')[0];
    var inputFile = document.getElementsByName('file')[0];
    inputFile.onchange = function () {
      var reader = new FileReader();
      reader.readAsText(this.files[0], 'UTF-8');
      reader.onload = function () {
        text.value = this.result;
      };
    };
  };
 
  // 创建链接列表
  function createLinkList() {
    let newWindows = [];
    const closeAllWindows = () => newWindows.forEach(win => win && !win.closed && win.close(), newWindows = []);
 
    const createLinkList = (containerId, links) => {
      const container = document.getElementById(containerId);
      links.forEach(link => {
        const li = document.createElement('li');
        li.textContent = link.title;
        if (link.id === 'closeButton') {
          li.id = link.id;
          li.onclick = closeAllWindows;
        } else if (!link.src) {
          li.classList.add('disabled');
        } else {
          li.onclick = () => {
            const newWindow = window.open(link.src, "_blank", "width=900,height=680,top=200,left=400");
            if (newWindow) {
              newWindows.push(newWindow);
              newWindow.focus();
            }
          };
        }
        container.appendChild(li);
      });
    };
 
    const links1 = [
      { title: "智能翻译", src: "https://fanyi.baidu.com" },
      { title: "哔哩哔哩", src: "https://www.bilibili.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/" },
    ];
 
    const links2 = [
      { title: "百度一下，你就知道", src: "https://www.baidu.com" },
      { 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: "vue图标", src: "https://vue-icons.kalimah-apps.com/" },
      { title: "GitHub", src: "https://github.com" }
    ];
 
    const links3 = [
      { title: "关闭全部新窗口", id: "closeButton" },
    ];
 
    createLinkList('localList', links1);
    createLinkList('webList', links2);
    createLinkList('closeButton', links3);
  }
 
  createLinkList();
 
</script>
 
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布