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

第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏，又增加了哔哩哔哩搜索和必应搜索

作者：AllinToyou | 2024-04-18 07:28:40

赞

踩

第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏，又增加了哔哩哔哩搜索和必应搜索

第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏，又增加了哔哩哔哩搜索和必应搜索.

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

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

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

  

闽ICP备14008679号