抽屉式备忘录(共25041字)

Sing Me to Sleep

html 复制代码
<!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>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-shadow: 1px 1px 1px #000;
      user-select: none;
    }
    body {
      /* background-image: url(./img/bg.jpg); */
      background-size: cover;
      background-color: #2c3e50;
    }
    ::placeholder {
      color: #ffffff;
      text-shadow: 1px 1px 1px #000;
    }
    li {
      list-style: none;
    }
    input,
    button {
      border: 0;
      color: rgb(252, 223, 4);
      background-color: #67C23A;
    }
    /* 页头开始 */
    .header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 100vw;
      height: 8vh;
      background-color: rgba(0, 0, 0, 0.5);
      /* logo */
      #logo {
        top: 2px;
        left: 2px;
        width: 8.5vw;
        img {
          float: left;
          width: 66px;
          height: 66px;
          border-radius: 50%;
          transition: transform 0.3s ease;
          &:hover {
            transform: scale(1.2);
          }
        }
        h2 {
          color: #ffffff;
          background-color: #f30303;
          border-radius: 50%;
          box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
            inset -4px -4px 5px rgba(0, 0, 0, 0.6);
          border: 0px solid black;
        }
        .my_name {
          letter-spacing: -8px;
        }
      }
      /* logo 结束 */
      /* 编辑按钮 */
      #displayBtn {
        width: 100px;
        height: 50px;
        border-radius: 5px;
        background-color: #67C23A;
        color: #E6A23C;
        font-size: 30px;
      }
      /* 编辑按钮 结束 */
      /* 时间天气  */
      #timeheader {
        display: flex;
        justify-content: center;
        align-items: center;
        #current_time {
          font-size: 2.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); */
        }
        iframe {
          background-color: #f7fdf5a7;
          border-radius: 50px;
          width: 150px;
          height: 40px;
        }
      }
      /* 时间天气结束  */
      /* 搜索区  */
      #search_container {
        .search_btn {
          position: absolute;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          background-color: green;
          &:hover {
            background-color: #0c333f;
            color: #ffffff;
          }
          &:active {
            background-color: rgba(255, 209, 3, 0.986);
            color: #fcf9f9;
            box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
              inset 2px 2px 3px rgba(0, 0, 0, 0.6);
          }
          .plus {
            display: block;
            width: 100%;
            height: 100%;
            background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
            background-size: 50% 2px, 2px 50%;
            background-position: center;
            background-repeat: no-repeat;
          }
        }
      }
      /* 搜索区结束 */
      /* 删除按钮 */
      .delete {
        position: sticky;
        top: 0px;
        background: #f30303;
        &:hover {
          background: #ffdd00;
          color: #ff0000;
        }
      }
      /* 删除按钮结束 */
      /* 全屏按钮 */
      #fullBtn {
        position: relative;
        top: -20px;
        height: 50px;
        border-radius: 5px;
        background-color: #67C23A;
        color: #E6A23C;
        font-size: 30px;
        &:hover {
          background-color: #0c333f;
          color: #ffffff;
        }
        &:active {
          background-color: rgba(255, 209, 3, 0.986);
          color: #fcf9f9;
          box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6),
            inset 2px 2px 3px rgba(0, 0, 0, 0.6);
        }
      }
      /* 全屏按钮结束 */
      /* 页头结束  */
    }
    /* 左侧导航栏 */
    #main {
      position: absolute;
      top: 8%;
      height: 92vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #click-section {
      width: 8%;
      height: 100%;
      /* padding: 20px 0; */
      position: relative;
    }
    #drawerboxes {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    #drawerboxes::before {
      content: "";
      width: 8px;
      height: 94%;
      position: absolute;
      left: -10px;
      top: 3%;
      z-index: 120;
    }
    .drawerbox {
      height: calc(100% / 5.5);
      width: 70%;
      position: relative;
      z-index: 100;
      transform: translateX(-70%);
      transition: transform .5s ease-in-out;
    }
    .drawerbox.active {
      transform: translateX(0);
    }
    .drawer-btn {
      width: 70%;
      height: 100%;
      font: 800 50px '';
      background-color: rgb(175, 190, 255);
      border: none;
      transition: background-color .5s ease-in-out;
      color: #ffffff00;
    }
    .drawer-btn.active {
      /* background-image: url(./img/bg.jpg);
      background-size: cover; */
      color: rgb(70, 100, 180);
    }
    .drawer-btn:hover {
      cursor: pointer;
    }
    .drawer-head {
      position: absolute;
      /* 使用渐变背景*/
      background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
      /*将背景剪切成文字的形状*/
      background-clip: text;
      -webkit-background-clip: text;
      /*文字颜色设为透明,使文字与背景融为一体*/
      -webkit-text-fill-color: transparent;
      font-size: 200px;
      font-weight: 800;
      right: -100px;
      top: calc(50% - 135px);
      text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
    }
    /* 左侧导航栏 结束*/
    #slide-section {
      position: relative;
      height: 100%;
      width: 92%;
      margin: 0 20px;
    }
    #slide-bar {
      position: absolute;
      top: 5%;
      left: -12px;
      height: 95%;
      width: 1px;
      background-color: rgb(223, 223, 223);
    }
    #bar {
      position: absolute;
      height: calc(100% / 4);
      width: 5px;
      top: 0;
      left: -1.2px;
      background: linear-gradient(rgba(255, 255, 255, 0.8) 10%,
          rgba(255, 255, 255, 0.3) 30%,
          #650000 75%,
          #320000) 50% 50%/97% 97%,
        #b10000;
      transition: transform .5s ease-in-out;
    }
    #card-section {
      height: 100%;
      width: 88%;
      overflow: hidden;
    }
    .card {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      color: white;
      transition: transform .5s ease-in-out;
    }
    #card1 .card-content {
      overflow: scroll;
      /* 隐藏下边滚动条 */
      overflow-X: hidden;
      /* 隐藏编辑窗口开始 */
      #hidden {
        display: none;
        position: fixed;
        transform: translate(200px, 30px);
        border-radius: 15px;
        flex-direction: column;
        background-color: #f8fff7;
        #Drag {
          position: relative;
          height: 40px;
          cursor: move;
          border-radius: 10px 10px 0 0;
          background-color: #c2c2c287;
          font-size: 30px;
          span {
            color: #fffefe;
            text-shadow: 1px 1px 1px #000;
          }
          i {
            color: rgb(252, 252, 252);
            /*设置去掉斜体文字属性*/
            font-style: normal;
            /*设置鼠标悬停时显示小手*/
            cursor: pointer;
            /*X按钮靠右*/
            float: right;
            transform: translate(-8px, 0px);
            &:hover {
              color: #bcbaba;
            }
          }
        }
        sub {
          color: #67c23a87;
          user-select: text;
          margin: 10px;
          display: block;
        }
        #myForm {
          border: 1px solid rgb(134, 133, 133);
          display: flex;
          margin: 0 20px 20px 20px;
          flex-direction: column;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 0px 10px;
          input[type="file"] {
            margin: 3px;
            height: 30px;
            background-color: #11b711a7;
          }
          div {
            display: flex;
            textarea {
              z-index: 9;
              font-size: 20px;
              width: 100%;
              margin: 3px;
              text-shadow: 1px 1px 1px #000;
              background-color: #06250675;
              &::placeholder {
                font-size: 20px;
              }
            }
          }
        }
      }
      /* 隐藏编辑窗口结束 */
    }
    /*留言内容区*/
    .memo_content_area {
      border: 2px solid rgb(134, 133, 133);
      max-width: 1300px;
      font-size: 20px;
      border-radius: 10px;
      height: 90vh;
      flex-wrap: wrap;
      /* overflow: scroll;
       隐藏下边滚动条 */
      overflow-X: hidden;
      span {
        user-select: text;
        color: #1ded3963;
        margin: 10px;
        &:hover {
          color: #ffffff;
        }
        sub {
          position: sticky;
          top: 0px;
          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: 0px 10px;
          user-select: text;
          border-radius: 20px;
        }
      }
      .finish {
        /* text-decoration: underline; */
        /* text-decoration-color: rgb(255, 0, 0); */
        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;
      }
    }
    /* 留言内容区结束 */
    #author {
      text-align: center;
    }
    #card2 .card-content {
      position: relative;
      margin: auto;
      /* 居中 */
      img {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        transition: transform 0.3s ease;
        &:hover {
          border-radius: 1px;
          transform: scale(10);
          transition: transform 0.5s ease;
        }
      }
    }
    #card4 .card-content {
      /* *********************账号表格*************************** */
      /* 首页 */
      .home_page {
        background-color: #4CAF50;
        color: white;
        border: 1px solid #4CAF50;
        font-size: 20px;
        margin: 20px;
        padding: 2px 5px;
        border-radius: 5px;
        text-decoration: none;
        &:hover {
          background-color: #e4f904;
          color: rgb(245, 5, 5);
        }
      }
      /* 首页样式结束 */
      h1 {
        /* 文本居中 */
        text-align: center;
        dfn {
          width: 222px;
          height: 50px;
          background-color: rgba(220, 0, 0, 1);
          background-image: linear-gradient(to top left,
              rgba(0, 0, 0, 0.2),
              rgba(0, 0, 0, 0.2) 30%,
              rgba(0, 0, 0, 0));
          box-shadow:
            inset 3px 4px 5px rgba(255, 255, 255, 0.6),
            inset -3px -4px 5px rgba(0, 0, 0, 0.6);
          border-radius: 10px;
          text-shadow: 3px 3px 3px #000000de;
        }
      }
      table {
        /* 文本居中 */
        text-align: center;
        /* 自动生成排序 */
        & li::marker {
          /* content: "(" counter(list-item)")"; */
          content: "" counter(list-item)"";
        }
        & select,
        th,
        td {
          /* 设置字体大小 */
          font-size: 20px;
          /* 表格边框 */
          border: 0px solid black;
          text-shadow: 1px 1px 1px #000;
          border-radius: 10px;
          background-color: rgba(220, 0, 0, 1);
          background-image: linear-gradient(to top left,
              rgba(0, 0, 0, 0.2),
              rgba(0, 0, 0, 0.2) 30%,
              rgba(0, 0, 0, 0));
          box-shadow:
            inset 4px 4px 4px rgba(255, 255, 255, 0.6),
            inset -4px -4px 5px rgba(0, 0, 0, 0.6);
          text-shadow: 1px 1px 1px #100000;
          & select {
            height: 30px;
            font-size: 20px;
            color: #ffffff;
          }
        }
        & th:nth-child(5),
        td:nth-child(5) {
          /* 文本靠左 */
          text-align: left;
        }
      }
      /* *账号表格结束* */
    }
    /* 右侧收藏网站 */
    .right_websites {
      position: fixed;
      top: 90px;
      right: 15px;
      width: 170px;
      text-align: center;
      color: #ffffff;
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
        margin: 10px 0px;
        color: #ffea07;
        display: flex;
        justify-content: center;
        &:hover {
          color: #ff0303;
          font-size: 22px;
        }
      }
    }
    /* ***右右侧收藏网站结束 */
  </style>
</head>
<body>
  <!-- 页头 -->
  <div class="header">
    <!-- logo -->
    <div id="logo">
      <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class="" target="_blank">
        <img src="file:///D:\My homepage\img\jpg\kong.jpg" alt="与妖为邻">
      </a>
      <h2 class="my_name">与妖为邻</h2>
      <h2 class="memo">备忘录</h2>
    </div>
    <!-- logo 结束 -->
    <!-- 编辑按钮 -->
    <button id="displayBtn" href="javascript:;">
      编辑
    </button>
    <!-- 编辑按钮 结束-->
    <!-- 时间天气 -->
    <div id="timeheader">
      <div id="current_time">当前时间</div>
      <!-- <div id="weather"></div> -->
      <!-- <iframe> 标签规定一个内联框架。它可以用来嵌入网页,并在网页中显示网页内容。 -->
      <iframe ref="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
        src="https://i.tianqi.com/?c=code&id=99" style="margin-left:20px;"></iframe>
    </div>
    <!-- 时间天气 结束-->
    <!--搜索  -->
    <div id="search_container">
      <!-- 必应搜索 -->
      <div id="bing_search">
        <form onsubmit="return bing_text()">
          <input type="text" class="bing_text inputText" placeholder="必应搜索">
          <button class="search_btn" onclick="return search">
            <i class="plus"></i>
          </button>
        </form>
      </div>
      <!-- 哔哩哔哩搜索 -->
      <div id="bilibili_search">
        <form onsubmit="return bilibili_text()">
          <input type="text" class="bilibili_text inputText" placeholder="哔哩哔哩" autocomplete="off" autofocus>
          <button class="search_btn" onclick="return search">
            <i class="plus"></i>
          </button>
        </form>
      </div>
      <!-- 百度搜索 -->
      <div id="baidu_search">
        <input id="baidu_text" class="inputText" type="text" placeholder="百度一下,你就知道">
        <span id="baidu_btn" class="search_btn">
          <i class="plus"></i>
        </span>
        <li id="baidu_list"></li>
      </div>
    </div>
    <!--搜索结束  -->
    <!-- 按钮 -->
    <button id="openButton">打开本地文件</button>
    <button id="delete" class="delete">对选择进行删除</button>
    <button id="fullBtn" onclick="fullBtn()">全屏</button>
    <!-- 按钮结束 -->
  </div>
  <!--  页头结束-->
  <!-- 左侧导航栏 -->
  <div id="main">
    <div id="click-section">
      <div id="drawerboxes">
        <div class="drawerbox active">
          <button class="drawer-btn active" onclick="slideTo(1)">首页<span class="drawer-head">1</span></button>
        </div>
        <div class="drawerbox">
          <button class="drawer-btn" onclick="slideTo(2)">图片<span class="drawer-head">2</span></button>
        </div>
        <div class="drawerbox">
          <button class="drawer-btn" onclick="slideTo(3)">视频<span class="drawer-head">3</span></button>
        </div>
        <div class="drawerbox">
          <button class="drawer-btn" onclick="slideTo(4)">账号<span class="drawer-head">4</span></button>
        </div>
      </div>
    </div>
    <!-- 左侧导航栏结束 -->
    <div id="slide-section">
      <div id="slide-bar">
        <div id="bar"></div>
      </div>
      <div id="card-section">
        <!-- 1号区 -->
        <div id="card1" class="card">
          <div class="card-content">
            <!-- 隐藏区hidden 开始 -->
            <div id="hidden">
              <div id="Drag">
                <span>文本操作</span>
                <i href="javascript:void(0);" id="closeBtn">&times</i>
              </div>
              <!--  -->
              <!--  -->
              <sub class="a_button">
                &lt;a class="a_href" href="输入网站地址" target="_blank"&gt;
                输入网站名称
                &lt;/a&gt;
                <!-- &nbsp;空格效果  &lt表示左半括号<, 用&gt表示右半括号> .   '&'字符的转义字符串是'&amp;'  -->
                &nbsp;&nbsp;&nbsp;
                &lt
                &amp;lt &amp;gt &gt
              </sub>
              <!--  -->
              <!--  -->
              <form id="myForm">
                <input type="file" name="inputfile"
                  accept="text/plain, text/css, text/html, text/javascript, text/markdown" class="background3D" />
                <div>
                  <input type="reset" value="重置">
                  <textarea class="up-textarea" name="uptextarea" rows="1" cols="50%"
                    placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
                  <button type="text" class="abb-text">添加</button>
                </div>
              </form>
              <!--  -->
            </div>
            <!-- 隐藏区hidden 结束 -->
            <!-- 留言区 -->
            <div class="memo_content_area" id="memo">
            </div>
            <!-- 留言区 结束-->
            <div id="author">作者:与妖为邻</div>
          </div>
        </div>
        <!-- 1号区结束 -->
        <!-- 2号区 -->
        <div id="card2" class="card">
          <div class="card-content">
            <img src="file:///D:\My homepage\img\jpg\yyds.jpg" alt="">
            <img src="file:///D:\My homepage\img\jpg\kong.jpg" alt="与妖为邻">
            <img src="file:///D:\My homepage\img\jpg\yyds1.jpg" alt="">
            <img src="file:///D:\My homepage\img\jpg\yyds2.jpg" alt="">
            <img src="file:///D:\My homepage\img\jpg\yyds6.jpg" alt="">
            <img src="file:///D:\My homepage\img\png\E4FF.png" alt="">
            <img src="file:///D:\My homepage\img\png\beij.png" alt="">
            <!-- <img src="file:///D:\My homepage\img\jpg\tuzi3.jpg" alt=""> -->
          </div>
        </div>
        <!-- 2号区结束 -->
        <!-- 3号区 -->
        <div id="card3" class="card">
          <div class="card-content">
            <div class="body_background">
              <video autoplay loop muted width="100%" height="100%">
                <source src="file:///D:\My homepage\Video\瘦肚腩,无跑跳完整版.mp4" type="video/mp4">
                <!-- 瘦肚腩,无跑跳完整版  泰国普吉岛卡伦海滩  葡萄牙亚速尔群岛-->
              </video>
            </div>
          </div>
        </div>
        <!-- 3号区结束 -->
        <!-- 4号区 -->
        <div id="card4" class="card">
          <div class="card-content">
            <div>
              <div id="b">
                <h1> <a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a><dfn>账号密码备忘录</dfn><sub
                    id="Time"></sub><a href="file:///D:\My homepage\本地连接\备忘录信息\html5代码账号密码备忘录.html"
                    class="home_page">true</a></h1>
                <hr />
                <ol></ol>
                <table border="1" cellspacing="1" cellpadding="5">
                  <tr>
                    <th width="50">序号</th>
                    <th width="110">网站</th>
                    <th width="230">账号</th>
                    <th width="130">密码</th>
                    <th width="1000">备注</th>
                  </tr>
                  <tr>
                    <td width="50">
                      <li></li>
                    </td>
                    <td>网易</td>
                    <td style="background-color:rgb(36, 180, 36);">88899ms8@163.com</td>
                    <td style="background-color:rgb(42, 126, 42);">
                      <select>
                        <option>查看密码</option>
                        <option>312223</option>
                      </select>
                    </td>
                    <td>原神冒险等阶=50 ,62956565000567756</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>网易</td>
                    <td style="background-color:rgb(54, 220, 54);">5080487zgl@163.com</td>
                    <td style="background-color:rgb(54, 220, 54);">
                      <select>
                        <option>查看密码</option>
                        <option>Q3456</option>
                      </select>
                    </td>
                    <td>原神冒险等阶=50 315145256</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>QQ</td>
                    <td style="background-color:rgb(54, 220, 54);">9099376</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>8L6583</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>QQ</td>
                    <td style="background-color:rgb(54, 220, 54);">54428</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>l222153</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>微信</td>
                    <td style="background-color:rgb(54, 220, 54);">550734776</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>555</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>Steam</td>
                    <td style="background-color:rgb(54, 220, 54);">565666</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>555555n</option>
                      </select>
                    </td>
                    <td>56668@qq.com</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>12123</td>
                    <td style="background-color:rgb(54, 220, 54);">13405556607</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>55535</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>WeGame</td>
                    <td style="background-color:rgb(54, 220, 54);">95546376</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>5336583</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>csdn博客</td>
                    <td style="background-color:rgb(54, 220, 54);">155555</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>8565555</option>
                      </select>
                    </td>
                    <td>与妖为邻</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>原神</td>
                    <td style="background-color:rgb(54, 220, 54);">12222309</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>822283</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>gitee</td>
                    <td style="background-color:rgb(54, 220, 54);">1322776</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>82222</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <tr>
                    <td>
                      <li></li>
                    </td>
                    <td>Microsoft</td>
                    <td style="background-color:rgb(54, 220, 54);">293726@qq.com</td>
                    <td style="background-color:rgb(66, 218, 66);">
                      <select>
                        <option>查看密码</option>
                        <option>822223</option>
                      </select>
                    </td>
                    <td>输入备注</td>
                  </tr>
                  <!-- 添加账号放上面 -->
                  <!-- 添加账号复制下面放上面
                        <tr>
                  <td>
                    <li></li>
                  </td>
                  <td >输入网站</td>
                  <td style="background-color:rgb(54, 220, 54);">输入账号</td>
                  <td style="background-color:rgb(66, 218, 66);" >
                    <select>
                      <option>查看密码</option>
                      <option>输入密码</option>
                    </select></td>
                  <td >输入备注</td>
                </tr>
        -->
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- 4号区结束 -->
      </div>
      <!-- 右侧收藏网站结束 -->
      <div class="right_websites">
        <h2>收藏网站</h2>
        <hr />
        <ul>
          <li><a href="https://fanyi.baidu.com" title="智能翻译" class="" target="_blank">智能翻译</a></li>
          <li><a
              href="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="原神大地图" class="" target="_blank">原神大地图</a></li>
          <li><a href="https://www.bilibili.com/" title="bilibili" class="" target="_blank">哔哩哔哩</a></li>
          <li><a href="https://www.dedexuexi.com/" target="_blank"> 建站学习网 </a></li>
          <li><a href="https://www.runoob.com/" title=" 菜鸟教程" class="" target="_blank">菜鸟教程</a></li>
          <li><a href="https://developer.mozilla.org/zh-CN/" title="MDN网络文档" class="" target="_blank">MDN网络文档</a></li>
          </li>
          <li><a href="https://cn.vuejs.org/" target="_blank"> JavaScript 框架vue </a></li>
          <li><a href="https://www.w3ccoo.com/" target="_blank"> w3schools 教程 </a></li>
          <li><a href="https://zh.javascript.info/" target="_blank"> 现代 JavaScript 教程 </a></li>
          <li><a href="https://www.dedexuexi.com/tool/3D/" target="_blank"></a></li>
          <li><a href="https://element-plus.org/zh-CN/" target="_blank">Vue3组件库</a></li>
          <li><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""
              target="_blank">与妖为邻的CSDN博客</a>
        </ul>
        <h2>本地连接</h2>
        <hr />
        <ul>
          <li><a href="D:\My homepage\本地连接\js生成随机数.html">随机数生成器</a></li>
          <li><a href="D:\My homepage\本地连接\本地连接计算器.html">计算器</a></li>
          <li><a href="D:\My homepage\本地连接\mylogs原生备忘录.html">mylogs备忘录</a></li>
          <li><a href="D:\My homepage\本地连接\todos备忘录.html">todos备忘录</a></li>
          <!-- <li><a href="D:\My homepage\本地连接\长久保存todos.html" >todos保存</a></li> -->
        </ul>
      </div>
      <!-- 右侧收藏网站结束---------------------------------------------------------------------------------------->
</body>
<script>
  /* 当前时间*/
  var current_time = document.getElementById("current_time");
  function showTime(time) {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth();
    var day = now.getDate();
    var hour = now.getHours();
    var minu = now.getMinutes();
    var second = now.getSeconds();
    month = month + 1;
    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;
    minu = minu < 10 ? "0" + minu : minu;
    second = second < 10 ? "0" + second : second;
    var time = year + "年" + month + "月" + day + "日 " + week + " " + hour + ":" + minu + ":" + second;
    current_time.innerHTML = time;
  }
  window.setInterval("showTime(current_time)", 1000);
  /* 当前时间 结束 */
  /*全屏*/
  document
    .getElementById("fullBtn")
    .addEventListener("click", function () {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    });
  var divCreated = false; // 标志变量,记录是否已经创建了div
  function createDiv() {
    if (!divCreated) {
      // 如果还没有创建过div
      var newDiv = document.createElement("div");
      newDiv.textContent = "新的div";
      newDiv.className = "my-class"; // 添加类名
      newDiv.style.backgroundColor = "lightblue"; // 添加样式
      newDiv.style.height = "100px";
      document.body.appendChild(newDiv);
      divCreated = true; // 将标志变量设置为true,表示已经创建了div
    }
  }
  /*全屏 结束*/
  /* 左侧导航  */
  // 定义变量 
  let chosenSlideNumber = 1; // 当前选择的幻灯片编号 
  let offset = 0; // 幻灯片偏移量 
  let barOffset = 0; // 导航条偏移量 
  // 获取幻灯片区域 
  const slideSection = document.querySelector("#slide-section");
  // 切换到指定编号的幻灯片 
  function slideTo(slideNumber) {
    drawerboxToggle(slideNumber); // 切换抽屉面板状态 
    drawerbtnToggle(slideNumber); // 切换抽屉按钮状态 
    // 更新偏移量 
    let previousSlideNumber = chosenSlideNumber;
    chosenSlideNumber = slideNumber;
    offset += (chosenSlideNumber - previousSlideNumber) * (-100); // 计算幻灯片偏移量 
    barOffset += (chosenSlideNumber - previousSlideNumber) * (100); // 计算导航条偏移量 
    barSlide(barOffset); // 移动导航条 
    // 获取所有幻灯片,为每个幻灯片设置偏移量 
    const slides = document.querySelectorAll(".card");
    Array.from(slides).forEach(slide => {
      slide.style.transform = `translateY(${offset}%)`;
    })
  }
  // 切换抽屉面板状态 
  function drawerboxToggle(drawerboxNumber) {
    let prevDrawerboxNumber = chosenSlideNumber;
    const drawerboxes = document.querySelectorAll(".drawerbox");
    drawerboxes[prevDrawerboxNumber - 1].classList.toggle("active"); // 切换前一个抽屉面板的状态 
    drawerboxes[drawerboxNumber - 1].classList.toggle("active"); // 切换当前抽屉面板的状态 
  }
  // 切换抽屉按钮状态 
  function drawerbtnToggle(drawerBtnNumber) {
    let prevDrawerBtnNumber = chosenSlideNumber;
    const drawerBtns = document.querySelectorAll(".drawer-btn");
    drawerBtns[prevDrawerBtnNumber - 1].classList.toggle("active"); // 切换前一个抽屉按钮的状态 
    drawerBtns[drawerBtnNumber - 1].classList.toggle("active"); // 切换当前抽屉按钮的状态 
  }
  // 移动导航条 
  function barSlide(barOffset) {
    const bar = document.querySelector("#bar");
    bar.style.transform = `translateY(${barOffset}%)`;
  }
  /*左侧导航结束*/
  /*隐藏的编辑框*/
  // 1. 获取元素
  var hidden = document.querySelector("#hidden");
  // var mask = document.querySelector('#none');
  // 2. 点击弹出层这个链接link,让mask和hidden显示出来
  displayBtn.addEventListener("click", function () {
    hidden.style.display = "block";
    // mask.style.display = 'block';
  });
  // 3. 点击closeBtn就隐藏mask和hidden
  closeBtn.addEventListener("click", function () {
    hidden.style.display = "none";
    // mask.style.display = 'none';
  });
  // 4. 开始拖拽
  //(1)当我们鼠标按下,就获得鼠标在盒子内的坐标
  Drag.addEventListener("mousedown", function (e) {
    var x = e.pageX - hidden.offsetLeft;
    var y = e.pageY - hidden.offsetTop;
    //(2)鼠标移动的时候,把鼠标在页面中的坐标,减去鼠标在盒子内的坐标就是模态框的left和top值
    document.addEventListener("mousemove", move);
    function move(e) {
      hidden.style.left = e.pageX - x + "px";
      hidden.style.top = e.pageY - y + "px";
    }
    //(3)鼠标弹起,就让鼠标移动事件移除
    document.addEventListener("mouseup", function () {
      document.removeEventListener("mousemove", move);
    });
  });
  /*隐藏的编辑框结束*/
  /*留言内容区*/
  var uptext = document.querySelector(".up-textarea");
  var addto = document.querySelector(".abb-text");
  var text = document.querySelector(".memo_content_area");
  /*************添加事件*****************/
  addto.onclick = function () {
    inserhtml(uptext.value, '');
    // 添加后清空输入框
    uptext.value = '';
    // 焦点放回输入框
    uptext.focus();
    savetodo();
  }
  /*************savetodo函数****************/
  var savetodo = function () {
    let todoarr = [];
    let todojs = {};
    var econtent = document.querySelectorAll('.JS_content');
    for (let index = 0; index < econtent.length; index++) {
      todojs.name = econtent[index].innerHTML;
      todojs.finish = econtent[index].classList.contains('finish');
      todoarr.push(todojs);
      todojs = {};
    }
    save(todoarr);
  }
  var loadtodo = function () {
    let todoarr = load();
    for (let index = 0; index < todoarr.length; index++) {
      inserhtml(todoarr[index].name, todoarr[index].finish ? 'finish' : '');
    }
  }
  /*********本地持久储存(localStorage)函数*****************************/
  var save = function (arr) {
    /**JSON.stringify(arr) 先将数组转换为字符串     *localStorage.todotext 然后将字符串保存到本地的todotext中*/
    localStorage.todotext = JSON.stringify(arr);
  }
  /**
   *读取函数,把todotext转成数组
   *然后返回数组*/
  var load = function (arr) {
    var arr = JSON.parse(localStorage.todotext);
    return arr;
  }
  /**********************finish样式函数*****************************/
  /**********************按钮点击事件*****************************/
  text.onclick = function () {
    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();
    /***********************对选择的进行删除********************************************/
    var Select = document.getElementById("delete");
    Select.onclick = function () {
      if (confirm("是否删除所选?")) {
        var check = document.getElementsByName("checkbox");
        for (var i = 0; i < check.length; i++) {
          if (check[i].checked) {
            check[i].parentElement.remove();
            i--;
            // 删除后保存
            savetodo();
          }
        }
      }
    }
  }
  var inserhtml = function (val, cls) {
    text.insertAdjacentHTML("beforeend",
      `<div class= 'dddd'>
            <input type="checkbox" name='checkbox'>                        
            <span  class='JS_content ${cls}'>${val}</span>       </div>`
    )
  }
  loadtodo();
  /*留言内容区 结束*/
  /**本地文件读取的函数**/
  window.onload = function () {
    var text = document.getElementsByName('uptextarea')[0],
      inputFile = document.getElementsByName('inputfile')[0];
    //上传文件
    inputFile.onchange = function () {
      console.log(this.files);
      var reader = new FileReader();
      reader.readAsText(this.files[0], 'UTF-8');
      reader.onload = function (e) {
        // urlData就是对应的文件内容
        var urlData = this.result;
        text.value = urlData;
      };
    };
  };
  /**************************复制文本******************************************/
  var oContent = document.getElementById('memo');
  oContent.ondragend = function () {
    document.execCommand("Copy");
    // alert("复制成功")
    displayAlert('error', '复制成功!', 1500);
  };
  /*哔哩哔哩 */
  function bilibili_text() {
    if (document.querySelector(".bilibili_text").value != "") {
      window.location.href = "https://search.bilibili.com/all?keyword=" + document.querySelector(".bilibili_text").value;
      document.querySelector(".bilibili_text").value = "";
    }
    return false;
  }
  /*哔哩哔哩结束 */
  /*必应搜索 */
  function bing_text() {
    if (document.querySelector(".bing_text").value != "") {
      window.location.href = "https://cn.bing.com/search?q=" + document.querySelector(".bing_text").value;
      document.querySelector(".bing_text").value = "";
    }
    return false;
  }
  /*必应搜索结束 */
  /* 百度搜索 */
  var txt = document.getElementById("baidu_text");
  var oUl = document.getElementById("baidu_list");
  // var oUl = document.querySelector(".baidu_list");
  var oBtn = document.getElementById("baidu_btn");
  txt.onkeyup = function () {
    oUl.innerHTML = "";
    var val = txt.value;
    var oScript = document.createElement("script");//动态创建script标签  
    oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=callback";
    //添加链接及回调函数  
    document.body.appendChild(oScript);//添加script标签  
    document.body.removeChild(oScript);//删除script标签  
  }
  //回调函数  
  function callback(data) {
    data.s.forEach(function (value) {
      var oLi = document.createElement("li");
      oLi.innerHTML = "<a href=\"https://www.baidu.com/s?wd=" + value + "\">" + value + "</a>";
      oUl.appendChild(oLi);
    })
    oUl.style.display = "block";
  }
  //点击跳转到百度页面,并搜索其中内容
  oBtn.onclick = function () {
    var val = txt.value;
    location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";
  }
  /* 百度搜索结束 */
  /*打开本地文件按钮的JavaScript*开始*****/
  // 获取打开URL按钮元素
  var openBtn = document.getElementById("openButton");
  // 添加点击事件处理程序
  openBtn.addEventListener('click', function () {
    // 获取文件路径
    // 这里假设您已经有一个函数来获取文件路径,例如 prompt('请输入文件路径', 'D:/前端学习', '_blank');
    var filePath = prompt("请输入网站地址或者本地文件路径", "D:\My homepage");
    if (filePath) {
      // 使用window.location对象的assign()方法导航到指定文件
      // window.location.assign(filePath);
      // 或者使用window.open()方法打开新窗口导航到指定文件
      window.open(filePath);
    } else {
      displayAlert('info', '未提供有效的文件路径!', 1500);
      // alert("未提供有效的文件路径!");
    }
  });
  /**打开本地文件按钮的JavaScript*结束***/
</script>
</html>
相关推荐
小白白一枚1113 小时前
css实现div被图片撑开
前端·css
@蒙面大虾3 小时前
CSS综合练习——懒羊羊网页设计
前端·css
顾菁寒3 小时前
WEB第二次作业
前端·css·html
Qhumaing4 小时前
html第一个网页
网络·html·html5
荆州克莱5 小时前
[FE] React 初窥门径(四):React 组件的加载过程(render 阶段)
spring boot·spring·spring cloud·css3·技术
前端Hardy8 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
聚宝盆_11 小时前
【css flex 多行均分有间隙布局】
前端·css
零希11 小时前
CSS元素类型(二)
前端·javascript·css
煎饼果子呀11 小时前
css-flex布局属性
开发语言·前端·css·html5
沈阳-施立11 小时前
CSS例子: 胶囊按钮
前端·css