devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明

作者：不正经 | 2024-04-15 21:40:56

赞

踩

第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明

第22次修改了可删除可持久保存的前端html备忘录视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明

 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>与妖为邻备忘录</title>
  7. </head>
  8. <style>
  9.   /* ******制定统一规则 开始 */
  10.   * {
  11.     margin: 0;
  12.     padding: 0;
  13.     box-sizing: border-box;
  14.     list-style: none;
  15.     user-select: none;
  16.     color: #fffbfb;
  17.     text-shadow: 1px 1px 1px #000;
  18.   }
  19.  input,
  20.   button {
  21.     cursor: pointer;
  22.     border-radius: 5px;
  23.     font-size: 18px;
  24.     border: 1px solid rgb(134, 133, 133);
  25.     color: rgb(252, 223, 4);
  26.     background-color: #ff02029c;
  27.   }
  28.  /* ******制定统一规则 结束 */
  29.   /* **页面背景样式：.body_background 开始*/
  30.   body {
  31.     min-height: 100vh;
  32.     /* background: radial-gradient(at 60% 0%, #3a6073, #1c2522); */
  33.     /* background: linear-gradient(to bottom, #022c05, #000000);  */
  34.     background: #3a6073;
  35.     /* background:  #303745; */
  36.     /* background:  #1c2522; */
  37.     background-size: cover;
  38.     animation: bodybackground 16s infinite;
  39.   }
  40.  /* **页面背景样式：.body_background*****结束 */
  41.   /* 头部标题.header_title 开始 */
  42.   .header_title {
  43.     position: fixed;
  44.    top: 2px;
  45.     left: 2px;
  46.     width: 140px;
  47.     height: 66px;
  48.     border-radius: 50%;
  49.     color: rgb(255, 255, 255);
  50.    /* 图片 img*/
  51.     img {
  52.       float: left;
  53.       width: 66px;
  54.       height: 66px;
  55.       border-radius: 50%;
  56.       transition: transform 0.3s ease;
  57.      &:hover {
  58.         transform: scale(1.1);
  59.       }
  60.     }
  61.    h2 {
  62.       background-color: #f30303;
  63.       border-radius: 50%;
  64.       background-image: linear-gradient(to top left,
  65.           rgba(0, 0, 0, 0.2),
  66.           rgba(0, 0, 0, 0.2) 30%,
  67.           rgba(0, 0, 0, 0));
  68.       box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
  69.         inset -4px -4px 5px rgba(0, 0, 0, 0.6);
  70.       border: 0px solid black;
  71.     }
  72.    .my_name {
  73.       letter-spacing: -8px;
  74.    }
  75.   }
  76.  /* 头部标题.header_title 结束 */
  77.  /* **********头部中心.header_center 开始  */
  78.   .header_center {
  79.     height: 66px;
  80.     color: rgb(255, 255, 255);
  81.     text-align: center;
  82.     max-width: 1450px;
  83.     margin: 0 auto;
  84.    .summary {
  85.       position: fixed;
  86.       top: 0;
  87.       left: 10%;
  88.    }
  89.    /* 修改说明.update_summary 开始 */
  90.     .update_summary {
  91.       font-size: 20px;
  92.       font-weight: 700;
  93.       position: relative;
  94.       cursor: pointer;
  95.       right: -700px;
  96.       color: #f40b0b;
  97.    }
  98.    .update_summary:hover+.css_summary_collapse {
  99.       grid-template-rows: 1fr;
  100.     }
  101.    .css_summary_collapse {
  102.       display: grid;
  103.       grid-template-rows: 0fr;
  104.       transition: grid-template-rows 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
  105.      div {
  106.         background-color: #012705;
  107.         overflow: hidden;
  108.         width: 180px;
  109.        margin: 0 1200px;
  110.        p {
  111.           position: relative;
  112.           color: #ffffff;
  113.          margin: 0 auto;
  114.         }
  115.      }
  116.     }
  117.    /* 修改说明.update_summary 结束 */
  118.     /* 当前时间 #current_time 开始*/
  119.     #current_time {
  120.       position: fixed;
  121.       color: #ffea00;
  122.       font-size: 30px;
  123.       top: 20px;
  124.       left: 50%;
  125.     }
  126.    /* 当前时间 #current_time 结束*/
  127.     /* 头部导航区.header_nav  开始 */
  128.     .header_nav {
  129.       position: fixed;
  130.       top: 35px;
  131.       left: 15%;
  132.       font-size: 20px;
  133.       border-bottom: 2px solid #f6f4db;
  134.      .header_pagination {
  135.         display: inline-block;
  136.        /* 在第一个分页链接和最后一个分页链接添加圆角：开始 */
  137.         li:first-child a {
  138.           border-top-left-radius: 5px;
  139.           border-bottom-left-radius: 5px;
  140.         }
  141.        li:last-child a {
  142.           border-top-right-radius: 5px;
  143.           border-bottom-right-radius: 5px;
  144.         }
  145.         /* 在第一个分页链接和最后一个分页链接添加圆角：结束 */
  146.        li {
  147.           list-style: none;
  148.           display: inline;
  149.          .home_page {
  150.             background-color: #4CAF50;
  151.             color: white;
  152.             border: 1px solid #4CAF50;
  153.            &:hover {
  154.               background-color: #ddd;
  155.               color: rgb(245, 5, 5);
  156.             }
  157.           }
  158.          a {
  159.             float: left;
  160.             margin: 0 15px;
  161.             text-decoration: none;
  162.             transition: background-color .3s;
  163.             border: 1px solid #ddd;
  164.             color: rgb(252, 232, 130);
  165.            &:hover:not(.home_page) {
  166.               background-color: #ddd;
  167.               font-size: 26px;
  168.               color: rgb(255, 255, 255);
  169.             }
  170.           }
  171.         }
  172.       }
  173.     }
  174.    /* 头部导航区.header_nav  结束 */
  175.     #openButton {
  176.       font-size: 20px;
  177.      &:hover {
  178.         background-color: #4CAF50;
  179.         color: white;
  180.         font-size: 24px;
  181.       }
  182.     }
  183.   }
  184.  /* **********头部中心.header_center 结束  */
  185.   /* *****左侧本地连接.local_connection 开始 ***** */
  186.  .local_connection {
  187.     position: fixed;
  188.    top: 75px;
  189.     left: 0;
  190.     width: 170px;
  191.     text-align: center;
  192.    a {
  193.       text-decoration: none;
  194.       margin: 10px 0px;
  195.       color: #ffea07;
  196.       display: flex;
  197.       justify-content: center;
  198.      &:hover {
  199.         color: #ff0303;
  200.        font-size: 22px;
  201.       }
  202.     }
  203.   }
  204.  /* *****左侧本地连接.local_connection 结束 ***** */
  205.   /* ***右侧常用网站 .right_websites开始  */
  206.   .right_websites {
  207.     position: fixed;
  208.    top: 75px;
  209.     right: 0;
  210.     width: 170px;
  211.     text-align: center;
  212.    a {
  213.       text-decoration: none;
  214.       margin: 10px 0px;
  215.       color: #ffea07;
  216.      display: flex;
  217.       justify-content: center;
  218.      &:hover {
  219.         color: #ff0303;
  220.        font-size: 22px;
  221.       }
  222.     }
  223.   }
  224.  /* ***右侧常用网站 .right_websites结束 */
  225.  /* ****备忘内容区：.memo_content_area *****开始 */
  226.   .memo_content_area {
  227.     border: 1px solid rgb(134, 133, 133);
  228.     max-width: 1300px;
  229.     margin: 0px 180px;
  230.     font-size: 20px;
  231.    /* 文本操作窗口按钮#abb_window和删除按钮.delete 开始 */
  232.     #abb_window,
  233.     .delete {
  234.       position: sticky;
  235.       top: 0px;
  236.       background: #f30303;
  237.      &:hover {
  238.         background: #000;
  239.       }
  240.     }
  241.    /* 文本操作窗口按钮#abb_window和删除按钮.delete 结束 */
  242.     sub {
  243.       position: sticky;
  244.       top: 0px;
  245.       color: rgb(252, 181, 181);
  246.       text-shadow: 1px 1px 1px #030303;
  247.       box-shadow:
  248.         inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  249.         inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  250.       margin: 0px 10px;
  251.       user-select: text;
  252.       border-radius: 20px;
  253.     }
  254.    span {
  255.       user-select: text;
  256.       color: #0d7b1c;
  257.      &:hover {
  258.         color: #ffffff;
  259.      }
  260.     }
  261.    .finish {
  262.       /* text-decoration: underline; */
  263.       /* text-decoration-color: rgb(255, 0, 0); */
  264.       background-color: rgb(191, 210, 255);
  265.       color: rgb(255, 250, 250);
  266.       text-shadow: 1px 1px 1px #030303;
  267.       box-shadow:
  268.         inset -2px -2px 3px rgba(255, 255, 255, 0.6),
  269.         inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  270.     }
  271.    a {
  272.       text-decoration: none;
  273.       color: #ebf704;
  274.     }
  275.    /* 隐藏的文本操作框.login布局开始 ***************************/
  276.     .login {
  277.       display: none;
  278.       width: 380px;
  279.       height: 195px;
  280.       position: fixed;
  281.       background-color: #03510385;
  282.       top: 350px;
  283.       left: 360px;
  284.       border-radius: 15px 15px 0 0;
  285.       z-index: 9999;
  286.       transform: translate(-90%, -90%);
  287.       border-radius: 15px;
  288.      .login-title {
  289.         border-radius: 15px 15px 0 0;
  290.         width: 100%;
  291.         line-height: 40px;
  292.         height: 40px;
  293.         font-size: 20px;
  294.         position: relative;
  295.         cursor: move;
  296.         background-color: #9bed9b85;
  297.        .cl1ose-login {
  298.           margin: 0 10px;
  299.         }
  300.        #closeBtn {
  301.           position: absolute;
  302.           float: right;
  303.           padding: 0px 10px 0px 10px;
  304.           top: -2px;
  305.           right: 5px;
  306.           font-size: 38px;
  307.           font-style: normal;
  308.           cursor: pointer;
  309.          &:hover {
  310.             color: #6b6b6b;
  311.           }
  312.         }
  313.       }
  314.      /* ****************编辑文本区 .edit_text 开始 */
  315.       .edit_text {
  316.         #myForm {
  317.           display: flex;
  318.           flex-direction: column;
  319.           box-sizing: border-box;
  320.           border-radius: 10px;
  321.           margin: 10px;
  322.           padding: 5px;
  323.           background-color: #c4a32c;
  324.          input[type="file"] {
  325.             margin: 3px;
  326.             height: 30px;
  327.             background-color: #11b711a7;
  328.           }
  329.          textarea {
  330.             font-size: 20px;
  331.             margin: 3px;
  332.             height: 50px;
  333.             color: #ffffff;
  334.             text-shadow: 1px 1px 1px #000;
  335.             background-color: #062506b5;
  336.            &::placeholder {
  337.               font-size: 20px;
  338.               color: #ffffff;
  339.             }
  340.           }
  341.          .abb-text,
  342.           input[type="reset"] {
  343.             width: 55px;
  344.             margin: 3px 58px;
  345.           }
  346.         }
  347.        /* ****编辑文本区 .edit_text 结束 */
  348.       }
  349.      /* 隐藏的文本操作框.login布局结束 ***************************/
  350.     }
  351.   }
  352.  /* **************************备忘内容区：.memo_content_area *****结束 */
  353. </style>
  354. <body>
  355.   <!-- 左侧本地连接.local_connection 开始 -->
  356.   <div class="local_connection">
  357.     <span>本地连接</span>
  358.     <hr />
  359.     <ul>
  360.       <li><a href="D:\My homepage\本地连接\js生成随机数.html" >随机数生成器</a></li>
  361.       <li><a href="D:\My homepage\本地连接\本地连接计算器.html" >计算器</a></li>
  362.       <!-- <li><a href="D:\My homepage\本地连接\长久保存todos.html" >todos保存</a></li> -->
  363.     </ul>
  364.   </div>
  365.   <!-- 左侧本地连接.local_connection 结束 --------------------------------------------------------------------------------->
  366.   <!-- 右侧常用网站 .right_websites开始-->
  367.   <div class="right_websites">
  368.     <span>常用网站</span>
  369.     <hr />
  370.     <ul>
  371.       <li><a href="https://cn.bing.com/search?q=%E7%BF%BB%E8%AF%91&qs=
  372.         n&form=QBRE&sp=-1&lq=0&sm=csrmain&pq=%E7%BF%BB%E8%AF%91&sc
  373.         =10-2&sk=&cvid=08CF7C75398B4C3C97E7AEC5D3D0921F&ghsh=0&ghacc=0&ghpl=" title="在线翻译" class=""
  374.           target="_blank">在线翻译</a></li>
  375.       <li><a href="https://www.bilibili.com/" title="bilibili" class="" target="_blank">哔哩哔哩</a></li>
  376.       <li><a href="https://www.runoob.com/" title=" 菜鸟教程" class="" target="_blank">菜鸟教程</a></li>
  377.       <li><a href="https://www.baidu.com/" title="百度一下" class="" target="_blank">百度一下</a></li>
  378.       <li><a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""
  379.           target="_blank">与妖为邻的CSDN博客</a>
  380.       </li>
  381.       <li><a
  382.           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"
  383.           title="原神大地图" class="" target="_blank">原神大地图</a></li>
  384.       <li><a href="https://cn.vuejs.org/" target="_blank"> JavaScript 框架vue </a></li>
  385.       <li><a href="https://www.w3ccoo.com/" target="_blank"> w3schools 教程 </a></li>
  386.       <li><a href="https://zh.javascript.info/" target="_blank"> 现代 JavaScript 教程 </a></li>
  387.       <li><a href="https://www.dedexuexi.com/" target="_blank"> 建站学习网 </a></li>
  388.       <li><a href="https://www.dedexuexi.com/tool/3D/" target="_blank"></a></li>
  389.       <li><a href="https://element-plus.org/zh-CN/" target="_blank">Vue3组件库</a></li>
  390.    </ul>
  391.   </div>
  392.   <!-- 右侧常用网站 .right_websites结束---------------------------------------------------------------------------------------->
  393.  <!-- -------头部标题.header_title 开始 -->
  394.   <div class="header_title">
  395.     <img src="file:///D:\My homepage\image\jpg\tuzi3.jpg" alt="与妖为邻">
  396.     <h2 class="my_name">与妖为邻</h2>
  397.     <h2 class="memo">备忘录</h2>
  398.   </div>
  399.   <!-- 头部中心.header_center -------开始 -->
  400.   <div class="header_center">
  401.     <!-- 修改说明.summary 开始-->
  402.     <div class="summary">浏览器主页,整理本地资源！备忘日常生活、各类教程、网页素材! key=todotext
  403.    </div> <span class="update_summary">第22次（0.2.0）更改</span>
  404.     <div class="css_summary_collapse">
  405.       <div class="update_notes">
  406.         <p>更改说明：视频背景分离，增加了本地连接，增加了纯CSS做的折叠隐藏修改说明</p>
  407.       </div>
  408.     </div>
  409.     <!-- 修改说明.summary 结束-->
  410.     <div id="current_time">当前时间</div>
  411.     <div class="header_nav">
  412.       <ul class="header_pagination">
  413.         <li><a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a></li>
  414.         <li><a href="D:\My homepage\本地连接\My logs备忘录.html">日志</a></li>
  415.         <li><a href="D:\My homepage\image">相册</a></li>
  416.         <li><a href="#">更多</a></li>
  417.         <li><a href="D:\My homepage\本地连接\html5代码账号密码备忘录样本.html">联系我</a></li>
  418.       </ul>
  419.       <button id="openButton">打开本地文件</button>
  420.     </div>
  421.   </div>
  422.   <!--  头部中心 .header_center 结束-->
  423.  <!-- ------------备忘内容区：.memo_content_area *****开始 ----------------------------------------------->
  424.   <div class="memo_content_area" id="memo">
  425.     <button id="abb_window" href="javascript:;">添加文本窗口</button>
  426.     <button id="delete" class="delete">对选择进行删除</button>
  427.     <sub class="a_button"> &lt;button class="a-href"&gt;
  428.       &lt;a href="输入网站地址" target="_blank"&gt;
  429.       输入网站名称
  430.       &lt;/a&gt; &lt;/button&gt; 
  431.        <!-- &nbsp;空格效果  &lt表示左半括号<, 用&gt表示右半括号> .   '&'字符的转义字符串是'&amp;'  -->
  432.        &nbsp;&nbsp;&nbsp;
  433.       &lt 
  434.       &amp;lt     &amp;gt  &gt
  435.     </sub>
  436.     <!-- ------------------编辑文本区 .edit_text 开始-->
  437.     <div id="login" class="login">
  438.       <div class="edit_text ">
  439.         <div id="title" class="login-title">
  440.           <span class="cl1ose-login">文本操作</span>
  441.           <i href="javascript:void(0);" id="closeBtn">&times</i>
  442.         </div>
  443.         <div>
  444.           <form id="myForm">
  445.             <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"
  446.               class="background3D" />
  447.             <textarea class="up-textarea" name="uptextarea" rows="1" cols="30%"
  448.               placeholder="选择本地txt、js、css或html文件，文件内容会被自动读取"></textarea>
  449.             <div>
  450.               <button type="text" class="abb-text">添加</button>
  451.               <input type="reset" value="重置">
  452.             </div>
  453.           </form>
  454.         </div>
  455.       </div>
  456.       <!-- ------------------编辑文本区 .edit_text 结束-->
  457.     </div>
  458.     <!-- ------------备忘内容区：.memo_content_area *****结束 ------------------------------------------------>
  459.   </div>
  460. </body>
  461. <script>
  462.   /* *********当前时间*current_time********************************************************* */
  463.   var current_time = document.getElementById("current_time");
  464.   function showTime(time) {
  465.     var now = new Date();
  466.     var year = now.getFullYear();
  467.     var month = now.getMonth();
  468.     var day = now.getDate();
  469.     var hour = now.getHours();
  470.     var minu = now.getMinutes();
  471.     var second = now.getSeconds();
  472.     month = month + 1;
  473.     var arr_work = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
  474.     var week = arr_work[now.getDay()];
  475.     month = month < 10 ? "0" + month : month;//时间月份个位补0
  476.     day = day < 10 ? "0" + day : day;
  477.     hour = hour < 10 ? "0" + hour : hour;
  478.     minu = minu < 10 ? "0" + minu : minu;
  479.     second = second < 10 ? "0" + second : second;
  480.     var time = year + "年" + month + "月" + day + "日 " + week + " " + hour + ":" + minu + ":" + second;
  481.     current_time.innerHTML = time;
  482.   }
  483.   window.setInterval("showTime(current_time)", 1000);
  484.   /* *********************当前时间.current_time 结束***************************************************** */
  485.   /****提示弹窗无需点击的函数*****开始*****************************************/
  486.   function displayAlert(type, data, time) {
  487.     var prompt = document.createElement("div");
  488.     if (type == "success") {
  489.       prompt.style.width = "200px";
  490.       prompt.style.backgroundColor = "#009900";
  491.     } else if (type == "error") {
  492.       prompt.style.width = "280px";
  493.       prompt.style.backgroundColor = "#990000";
  494.     } else if (type == "info") {
  495.       prompt.style.backgroundColor = " #e6b800";
  496.       prompt.style.width = "600px";
  497.     } else {
  498.       return;
  499.     }
  500.     prompt.id = "prompt";
  501.     prompt.style.textAlign = "center";
  502.     prompt.style.position = "fixed";
  503.     prompt.style.height = "60px";
  504.     prompt.style.marginLeft = "-100px";
  505.     prompt.style.marginTop = "-30px";
  506.     prompt.style.left = "30%";
  507.     prompt.style.top = "30%";
  508.     prompt.style.color = "white";
  509.     prompt.style.fontSize = "25px";
  510.     prompt.style.borderRadius = "20px";
  511.     prompt.style.textAlign = "center";
  512.     prompt.style.lineHeight = "60px";
  513.     if (document.getElementById("") == null) {
  514.       document.body.appendChild(prompt);
  515.       prompt.innerHTML = data;
  516.       setTimeout(function () {
  517.         document.body.removeChild(prompt);
  518.       }, time);
  519.     }
  520.   }
  521.   /****提示弹窗无需点击的函数*****结束*****************************************/
  522.   /* 
  523. /***********************备忘内容区：.memo_content_area *****开始*******************************/
  524.   var uptext = document.querySelector(".up-textarea");
  525.   var addto = document.querySelector(".abb-text");
  526.   var text = document.querySelector(".memo_content_area");
  527.   /*************添加事件*****************/
  528.   addto.onclick = function () {
  529.     inserhtml(uptext.value, '');
  530.     // 添加后清空输入框
  531.     uptext.value = '';
  532.     // 焦点放回输入框
  533.     uptext.focus();
  534.     savetodo();
  535.   }
  536.   /*************savetodo函数****************/
  537.   var savetodo = function () {
  538.     let todoarr = [];
  539.     let todojs = {};
  540.     var econtent = document.querySelectorAll('.JS_content');
  541.     for (let index = 0; index < econtent.length; index++) {
  542.       todojs.name = econtent[index].innerHTML;
  543.       todojs.finish = econtent[index].classList.contains('finish');
  544.       todoarr.push(todojs);
  545.       todojs = {};
  546.     }
  547.     save(todoarr);
  548.   }
  549.   var loadtodo = function () {
  550.     let todoarr = load();
  551.     for (let index = 0; index < todoarr.length; index++) {
  552.       inserhtml(todoarr[index].name, todoarr[index].finish ? 'finish' : '');
  553.     }
  554.   }
  555.   /*********本地持久储存（localStorage）函数*****************************/
  556.   var save = function (arr) {
  557.     /**JSON.stringify(arr) 先将数组转换为字符串     *localStorage.todotext 然后将字符串保存到本地的todotext中*/
  558.     localStorage.todotext = JSON.stringify(arr);
  559.   }
  560.   /**
  561.    *读取函数，把todotext转成数组
  562.    *然后返回数组*/
  563.   var load = function (arr) {
  564.     var arr = JSON.parse(localStorage.todotext);
  565.     return arr;
  566.   }
  567.   /**********************finish样式函数*****************************/
  568.   /**********************按钮点击事件*****************************/
  569.   text.onclick = function () {
  570.     var tg = event.target;
  571.     // 获取父元素下的所有子元素
  572.     var tgkids = tg.parentElement.children;
  573.     /*******************************对复选框的点击事件******************************/
  574.     if (tgkids[0].checked) {
  575.       tgkids[1].classList.add("finish");
  576.     }
  577.     else {
  578.       tgkids[1].classList.remove("finish");
  579.     }
  580.     // 保存更改的样式
  581.     savetodo();
  582.     /***********************对选择的进行删除********************************************/
  583.     var Select = document.getElementById("delete");
  584.     Select.onclick = function () {
  585.       if (confirm("是否删除所选？")) {
  586.         var check = document.getElementsByName("checkbox");
  587.         for (var i = 0; i < check.length; i++) {
  588.           if (check[i].checked) {
  589.             check[i].parentElement.remove();
  590.             i--;
  591.             // 删除后保存
  592.             savetodo();
  593.           }
  594.         }
  595.       }
  596.     }
  597.   }
  598.   var inserhtml = function (val, cls) {
  599.     text.insertAdjacentHTML("beforeend",
  600.       `<div>
  601.             <input type="checkbox" name='checkbox'>                        
  602.             <span  class='JS_content ${cls}'>${val}</span>       </div>`
  603.     )
  604.   }
  605.   loadtodo();
  606.   /********************文本操作框*****************************************/
  607.   // 1. 获取元素
  608.   var login = document.querySelector('.login');
  609.   var mask = document.querySelector('#memo');
  610.   // 2. 点击弹出层这个链接link，让mask和login显示出来
  611.   abb_window.addEventListener('click', function () {
  612.     mask.style.display = 'block';
  613.     login.style.display = 'block';
  614.   });
  615.   // 3. 点击closeBtn就隐藏mask和login
  616.   closeBtn.addEventListener('click', function () {
  617.     // mask.style.display = 'none';
  618.     login.style.display = 'none';
  619.   });
  620.   // 4. 开始拖拽
  621.   //（1）当我们鼠标按下，就获得鼠标在盒子内的坐标
  622.   title.addEventListener('mousedown', function (e) {
  623.     var x = e.pageX - login.offsetLeft;
  624.     var y = e.pageY - login.offsetTop;
  625.     //（2）鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值
  626.     document.addEventListener('mousemove', move);
  627.     function move(e) {
  628.       login.style.left = e.pageX - x + 'px';
  629.       login.style.top = e.pageY - y + 'px';
  630.     }
  631.     //（3）鼠标弹起，就让鼠标移动事件移除
  632.     document.addEventListener('mouseup', function () {
  633.       document.removeEventListener('mousemove', move);
  634.     });
  635.   });
  636.   /**************************打开URL按钮的JavaScript******************************************/
  637.   // 获取打开URL按钮元素
  638.   var openBtn = document.getElementById("openButton");
  639.   // 添加点击事件处理程序
  640.   openBtn.addEventListener('click', function () {
  641.     // 获取文件路径
  642.     // 这里假设您已经有一个函数来获取文件路径，例如 prompt('请输入文件路径', 'D:/前端学习', '_blank');
  643.     var filePath = prompt("请输入网站地址或者本地文件路径", "D:\My homepage");
  644.     if (filePath) {
  645.       // 使用window.location对象的assign()方法导航到指定文件
  646.       // window.location.assign(filePath);
  647.       // 或者使用window.open()方法打开新窗口导航到指定文件
  648.       window.open(filePath);
  649.     } else {
  650.       displayAlert('info', '未提供有效的文件路径！', 1500);
  651.       // alert("未提供有效的文件路径！");
  652.     }
  653.   });
  654.   /**************************本地文件读取的函数******************************************/
  655.   window.onload = function () {
  656.     var text = document.getElementsByName('uptextarea')[0],
  657.       inputFile = document.getElementsByName('inputfile')[0];
  658.     //上传文件
  659.     inputFile.onchange = function () {
  660.       console.log(this.files);
  661.       var reader = new FileReader();
  662.       reader.readAsText(this.files[0], 'UTF-8');
  663.       reader.onload = function (e) {
  664.         // urlData就是对应的文件内容
  665.         var urlData = this.result;
  666.         text.value = urlData;
  667.       };
  668.     };
  669.   };
  670.   /**************************复制文本******************************************/
  671.   var oContent = document.getElementById('memo');
  672.   oContent.ondragend = function () {
  673.     document.execCommand("Copy");
  674.     // alert("复制成功")
  675.     displayAlert('error', '复制成功！', 1500);
  676.   };
  677. </script>
  678. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/430232
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号