第23次修改了可删除可持久保存的前端html备忘录:增加了百度引擎

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>与妖为邻备忘录</title>
</head>
<style>
  /* ******制定统一规则 开始 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    user-select: none;
    color: #fffbfb;
    text-shadow: 1px 1px 1px #000;
  }
  input,
  button {
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
    border: 1px solid rgb(134, 133, 133);
    color: rgb(252, 223, 4);
    background-color: #ff02029c;
  }
  /* ******制定统一规则 结束 */
  /* **页面背景样式:.body_background 开始*/
  body {
    min-height: 100vh;
    /* background: radial-gradient(at 60% 0%, #3a6073, #1c2522); */
    /* background: linear-gradient(to bottom, #022c05, #000000);  */
    background: #3a6073;
    /* background:  #303745; */
    /* background:  #1c2522; */
    background-size: cover;
    animation: bodybackground 16s infinite;
  }
  /* **页面背景样式:.body_background*****结束 */
  /* 头部标题.header_title 开始 */
  .header_title {
    position: fixed;
    top: 2px;
    left: 2px;
    width: 140px;
    height: 66px;
    border-radius: 50%;
    color: rgb(255, 255, 255);
    /* 图片 img*/
    img {
      float: left;
      width: 66px;
      height: 66px;
      border-radius: 50%;
      transition: transform 0.3s ease;
      &:hover {
        transform: scale(1.1);
      }
    }
    h2 {
      background-color: #f30303;
      border-radius: 50%;
      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);
      border: 0px solid black;
    }
    .my_name {
      letter-spacing: -8px;
    }
  }
  /* 头部标题.header_title 结束 */
  /* **********头部中心.header_center 开始  */
  .header_center {
    height: 66px;
    color: rgb(255, 255, 255);
    text-align: center;
    max-width: 1450px;
    margin: 0 auto;
    .summary {
      position: fixed;
      top: 0;
      left: 10%;
    }
    /* 修改说明.update_summary 开始 */
    .update_summary {
      font-size: 20px;
      font-weight: 700;
      position: relative;
      cursor: pointer;
      right: -700px;
      color: #f40b0b;
    }
    .update_summary:hover+.css_summary_collapse {
      grid-template-rows: 1fr;
    }
    .css_summary_collapse {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
      div {
        background-color: #012705;
        overflow: hidden;
        width: 180px;
        margin: 0 1200px;
        p {
          position: relative;
          color: #ffffff;
          margin: 0 auto;
        }
      }
    }
    /* 修改说明.update_summary 结束 */
    /* 当前时间 #current_time 开始*/
    #current_time {
      position: fixed;
      color: #ffea00;
      font-size: 30px;
      top: 20px;
      left: 50%;
    }
    /* 当前时间 #current_time 结束*/
    /* 头部导航区.header_nav  开始 */
    .header_nav {
      position: fixed;
      top: 35px;
      left: 15%;
      font-size: 20px;
      border-bottom: 2px solid #f6f4db;
      .header_pagination {
        display: inline-block;
        /* 在第一个分页链接和最后一个分页链接添加圆角:开始 */
        li:first-child a {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }
        li:last-child a {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
        /* 在第一个分页链接和最后一个分页链接添加圆角:结束 */
        li {
          list-style: none;
          display: inline;
          .home_page {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
            &:hover {
              background-color: #ddd;
              color: rgb(245, 5, 5);
            }
          }
          a {
            float: left;
            margin: 0 15px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            color: rgb(252, 232, 130);
            &:hover:not(.home_page) {
              background-color: #ddd;
              font-size: 26px;
              color: rgb(255, 255, 255);
            }
          }
        }
      }
    }
    /* 头部导航区.header_nav  结束 */
    #openButton {
      font-size: 20px;
      &:hover {
        background-color: #4CAF50;
        color: white;
        font-size: 24px;
      }
    }
  }
  /* **********头部中心.header_center 结束  */
  /* 中部搜索区:#baidu_search *******************开始 */
  #baidu_search {
    position: fixed;
    top: 70px;
    left: 180px;
    width: 1300px;
    height: 90px; 
    border: 1px solid rgb(134, 133, 133);
    p {
      position: fixed;
      top: 90px;
      left: 430px;
      background-color: #39ba46;
      #baidu_text{  
                    width:500px;  
                    height:50px;  
                    line-height: 50px;  
                    padding-left:20px;  
                    font-size: 16px; 
                    position: absolute; 
                    background-color: rgba(255, 255, 255, 0.489); 
                    border: 0px; 
                    outline: none;
                     background: linear-gradient(to top left, #022c05, #000000);
                    border-radius:  5px 0 0  5px;
                    cursor: text;
            }  
            #baidu_btn{
            	width: 80px;
            	height: 50px;
              background-color: rgba(255, 255, 255, 0.671); 
            	outline: none;
            	border: 0;
            	position: absolute;
            	left: 500px;
              border-radius: 0 5px   5px  0;
            }
    }
    #baidu_list{  
                height:auto;  
                border:1px solid #ccc;  
                display: none; 
                position: absolute;
                top: 70px; 
                left: 250px;
            }  
  }
  #baidu_search ul li{  
                    width:498px;  
                    height:30px;  
                    line-height: 30px;  
                    text-indent:10px;  
                    font-size: 16px;  
                    list-style: none;  }
            #baidu_search li a{  
                    text-decoration:none;  
            } 
            #baidu_search ul li:hover{  
                display:block;  
                background:#ccc;  
                font-size: 30px;
                color:#fff;  
                z-index: 9999;
            }  
  /* 中部搜索区:#baidu_search *******************结束 */
  /* *****左侧本地连接.local_connection 开始 ***** */
  .local_connection {
    position: fixed;
    top: 75px;
    left: 0;
    width: 170px;
    text-align: center;
    a {
      text-decoration: none;
      margin: 10px 0px;
      color: #ffea07;
      display: flex;
      justify-content: center;
      &:hover {
        color: #ff0303;
        font-size: 22px;
      }
    }
  }
  /* *****左侧本地连接.local_connection 结束 ***** */
  /* ***右侧常用网站 .right_websites开始  */
  .right_websites {
    position: fixed;
    top: 75px;
    right: 0;
    width: 170px;
    text-align: center;
    a {
      text-decoration: none;
      margin: 10px 0px;
      color: #ffea07;
      display: flex;
      justify-content: center;
      &:hover {
        color: #ff0303;
        font-size: 22px;
      }
    }
  }
  /* ***右侧常用网站 .right_websites结束 */
  /* ****底部备忘内容区:.memo_content_area *****开始 */
  .memo_content_area {
    border: 1px solid rgb(134, 133, 133);
    max-width: 1300px;
    margin: 95px 180px;
    font-size: 20px;
    /* 文本操作窗口按钮#abb_window和删除按钮.delete 开始 */
    #abb_window,
    .delete {
      position: sticky;
      top: 0px;
      background: #f30303;
      &:hover {
        background: #000;
      }
    }
    /* 文本操作窗口按钮#abb_window和删除按钮.delete 结束 */
    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;
    }
    span {
      user-select: text;
      color: #0d7b1c;
      &:hover {
        color: #ffffff;
      }
    }
    .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;
    }
    /* 隐藏的文本操作框.login布局开始 ***************************/
    .login {
      display: none;
      width: 380px;
      height: 195px;
      position: fixed;
      background-color: #03510385;
      top: 350px;
      left: 360px;
      border-radius: 15px 15px 0 0;
      z-index: 9999;
      transform: translate(-90%, -90%);
      border-radius: 15px;
      .login-title {
        border-radius: 15px 15px 0 0;
        width: 100%;
        line-height: 40px;
        height: 40px;
        font-size: 20px;
        position: relative;
        cursor: move;
        background-color: #9bed9b85;
        .cl1ose-login {
          margin: 0 10px;
        }
        #closeBtn {
          position: absolute;
          float: right;
          padding: 0px 10px 0px 10px;
          top: -2px;
          right: 5px;
          font-size: 38px;
          font-style: normal;
          cursor: pointer;
          &:hover {
            color: #6b6b6b;
          }
        }
      }
      /* ****************编辑文本区 .edit_text 开始 */
      .edit_text {
        #myForm {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          border-radius: 10px;
          margin: 10px;
          padding: 5px;
          background-color: #c4a32c;
          input[type="file"] {
            margin: 3px;
            height: 30px;
            background-color: #11b711a7;
          }
          textarea {
            font-size: 20px;
            margin: 3px;
            height: 50px;
            color: #ffffff;
            text-shadow: 1px 1px 1px #000;
            background-color: #062506b5;
            &::placeholder {
              font-size: 20px;
              color: #ffffff;
            }
          }
          .abb-text,
          input[type="reset"] {
            width: 55px;
            margin: 3px 58px;
          }
        }
        /* ****编辑文本区 .edit_text 结束 */
      }
      /* 隐藏的文本操作框.login布局结束 ***************************/
    }
  }
  /* ****底部备忘内容区:.memo_content_area *****结束 */
</style>
<body>
  <!-- 左侧本地连接.local_connection 开始 -->
  <div class="local_connection">
    <span>本地连接</span>
    <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\本地连接\长久保存todos.html" >todos保存</a></li> -->
    </ul>
  </div>
  <!-- 左侧本地连接.local_connection 结束 --------------------------------------------------------------------------------->
  <!-- 右侧常用网站 .right_websites开始-->
  <div class="right_websites">
    <span>常用网站</span>
    <hr />
    <ul>
      <li><a href="https://cn.bing.com/search?q=%E7%BF%BB%E8%AF%91&qs=
        n&form=QBRE&sp=-1&lq=0&sm=csrmain&pq=%E7%BF%BB%E8%AF%91&sc
        =10-2&sk=&cvid=08CF7C75398B4C3C97E7AEC5D3D0921F&ghsh=0&ghacc=0&ghpl=" 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>
  </div>
  <!-- 右侧常用网站 .right_websites结束---------------------------------------------------------------------------------------->
  <!-- -------头部标题.header_title 开始 -->
  <div class="header_title">
    <img src="file:///D:\My homepage\image\jpg\tuzi3.jpg" alt="与妖为邻">
    <h2 class="my_name">与妖为邻</h2>
    <h2 class="memo">备忘录</h2>
  </div>
  <!-- 头部中心.header_center -------开始 -->
  <div class="header_center">
    <!-- 修改说明.summary 开始-->
    <div class="summary">浏览器主页,整理本地资源!备忘日常生活、各类教程、网页素材! key=todotext
    </div> <span class="update_summary">第23次(0.3.0)更改</span>
    <div class="css_summary_collapse">
      <div class="update_notes">
        <p>更改说明:增加一个百度搜索引擎</p>
      </div>
    </div>
    <!-- 修改说明.summary 结束-->
    <div id="current_time">当前时间</div>
    <div class="header_nav">
      <ul class="header_pagination">
        <li><a href="file:///C:\Users\90917\Desktop\备忘录.html" class="home_page">首页</a></li>
        <li><a href="D:\My homepage\本地连接\My logs备忘录.html">日志</a></li>
        <li><a href="D:\My homepage\image">相册</a></li>
        <li><a href="#">更多</a></li>
        <li><a href="D:\My homepage\本地连接\html5代码账号密码备忘录样本.html">联系我</a></li>
      </ul>
      <button id="openButton">打开本地文件</button>
    </div>
  </div>
  <!--  头部中心 .header_center 结束-->
  <!-- 中部搜索区:#baidu_search -----开始 -->
  <div id="baidu_search">
    <p>
      <input type="text" id="baidu_text">
      <input type="button" name="btn" id="baidu_btn" value="百度一下" />
    </p>
    <ul id="baidu_list"></ul>
  </div>
  <!-- 中部搜索区:#baidu_search -----结束 -->
  <!-- ------------备忘内容区:.memo_content_area *****开始 ----------------------------------------------->
  <div class="memo_content_area" id="memo">
    <button id="abb_window" href="javascript:;">添加文本窗口</button>
    <button id="delete" class="delete">对选择进行删除</button>
    <sub class="a_button"> &lt;button class="a-href"&gt;
      &lt;a href="输入网站地址" target="_blank"&gt;
      输入网站名称
      &lt;/a&gt; &lt;/button&gt;
      <!-- &nbsp;空格效果  &lt表示左半括号<, 用&gt表示右半括号> .   '&'字符的转义字符串是'&amp;'  -->
      &nbsp;&nbsp;&nbsp;
      &lt
      &amp;lt &amp;gt &gt
    </sub>
    <!-- ------------------编辑文本区 .edit_text 开始-->
    <div id="login" class="login">
      <div class="edit_text ">
        <div id="title" class="login-title">
          <span class="cl1ose-login">文本操作</span>
          <i href="javascript:void(0);" id="closeBtn">&times</i>
        </div>
        <div>
          <form id="myForm">
            <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"
              class="background3D" />
            <textarea class="up-textarea" name="uptextarea" rows="1" cols="30%"
              placeholder="选择本地txt、js、css或html文件,文件内容会被自动读取"></textarea>
            <div>
              <button type="text" class="abb-text">添加</button>
              <input type="reset" value="重置">
            </div>
          </form>
        </div>
      </div>
      <!-- ------------------编辑文本区 .edit_text 结束-->
    </div>
    <!-- ------------备忘内容区:.memo_content_area *****结束 ------------------------------------------------>
  </div>
</body>
<script>
  /* *********当前时间*current_time********************************************************* */
  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);
  /* *********************当前时间.current_time 结束***************************************************** */
  /****提示弹窗无需点击的函数*****开始*****************************************/
  function displayAlert(type, data, time) {
    var prompt = document.createElement("div");
    if (type == "success") {
      prompt.style.width = "200px";
      prompt.style.backgroundColor = "#009900";
    } else if (type == "error") {
      prompt.style.width = "280px";
      prompt.style.backgroundColor = "#990000";
    } else if (type == "info") {
      prompt.style.backgroundColor = " #e6b800";
      prompt.style.width = "600px";
    } else {
      return;
    }
    prompt.id = "prompt";
    prompt.style.textAlign = "center";
    prompt.style.position = "fixed";
    prompt.style.height = "60px";
    prompt.style.marginLeft = "-100px";
    prompt.style.marginTop = "-30px";
    prompt.style.left = "30%";
    prompt.style.top = "30%";
    prompt.style.color = "white";
    prompt.style.fontSize = "25px";
    prompt.style.borderRadius = "20px";
    prompt.style.textAlign = "center";
    prompt.style.lineHeight = "60px";
    if (document.getElementById("") == null) {
      document.body.appendChild(prompt);
      prompt.innerHTML = data;
      setTimeout(function () {
        document.body.removeChild(prompt);
      }, time);
    }
  }
  /****提示弹窗无需点击的函数*****结束*****************************************/
    /* 中部搜索区:#baidu_search *******************开始 */
    var txt = document.getElementById("baidu_text");  
            var oUl = document.getElementById("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";
            }
       /* 中部搜索区:#baidu_search *******************结束 */
  /* 
/***********************备忘内容区:.memo_content_area *****开始*******************************/
  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>
            <input type="checkbox" name='checkbox'>                        
            <span  class='JS_content ${cls}'>${val}</span>       </div>`
    )
  }
  loadtodo();
  /********************文本操作框*****************************************/
  // 1. 获取元素
  var login = document.querySelector('.login');
  var mask = document.querySelector('#memo');
  // 2. 点击弹出层这个链接link,让mask和login显示出来
  abb_window.addEventListener('click', function () {
    mask.style.display = 'block';
    login.style.display = 'block';
  });
  // 3. 点击closeBtn就隐藏mask和login
  closeBtn.addEventListener('click', function () {
    // mask.style.display = 'none';
    login.style.display = 'none';
  });
  // 4. 开始拖拽
  //(1)当我们鼠标按下,就获得鼠标在盒子内的坐标
  title.addEventListener('mousedown', function (e) {
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    //(2)鼠标移动的时候,把鼠标在页面中的坐标,减去鼠标在盒子内的坐标就是模态框的left和top值
    document.addEventListener('mousemove', move);
    function move(e) {
      login.style.left = e.pageX - x + 'px';
      login.style.top = e.pageY - y + 'px';
    }
    //(3)鼠标弹起,就让鼠标移动事件移除
    document.addEventListener('mouseup', function () {
      document.removeEventListener('mousemove', move);
    });
  });
  /**************************打开URL按钮的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("未提供有效的文件路径!");
    }
  });
  /**************************本地文件读取的函数******************************************/
  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);
  };
</script>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/540399.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(三)ffmpeg 解码流程以及函数介绍

一、视频解码流程 二、函数介绍 1.avformat_network_init 函数作用&#xff1a; 执行网络库的全局初始化。这是可选的&#xff0c;不再推荐。 此函数仅用于解决旧GnuTLS或OpenSSL库的线程安全问题。如果libavformat链接到这些库的较新版本&#xff0c;或者不使用它们&#…

跟TED演讲学英文:The dark side of competition in AI by Liv Boeree

The dark side of competition in AI Link: https://www.ted.com/talks/liv_boeree_the_dark_side_of_competition_in_ai Speaker:Liv Boeree Date: October 2023 文章目录 The dark side of competition in AIIntroductionVocabularyTranscriptSummary后记 Introduction Co…

react 初学增删改查购物车案例

界面 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>react-购物车案例</title><…

[MQTT]Mosquitto的簡介、安裝與本機連接測試

MQTT(Message Queuing Telemetry Transport)是基於發布/訂閱模式(Publish/Subscribe)的輕量級網絡通訊協議&#xff0c;專用於在低帶寬、不可靠的網絡環境中傳輸數據&#xff0c;關於工作原理和優點如下: 1.發布/訂閱模式(Publish/Subscribe) 發布者將消息發布特定的主題(top…

MIPI CSI-2 虚拟通道

一、背景 在介绍虚拟通道之前&#xff0c;我们先描述一个场景&#xff0c;主控芯片只有 4 个 D-PHY VIN 接口&#xff0c;但是产品需要4 个以上的摄像头。 如上图所示&#xff0c;如果我们把摄像头和主控芯片直接通过 D-PHY 接口连接&#xff0c;最多只能接 4 个摄像头&#x…

【Linux】基础IO----理解缓冲区

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;理解缓冲区 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1a;Linux初阶 > 望…

Linux 系统解压缩文件

Linux系统&#xff0c;可以使用unzip命令来解压zip文件 方法如下 1. 打开终端&#xff0c;在命令行中输入以下命令来安装unzip&#xff1a; sudo apt-get install unzip 1 2. 假设你想要将zip文件解压缩到名为"target_dir"的目录中&#xff0c;在终端中切换到目标路…

ActiveMQ介绍及linux下安装ActiveMQ

ActiveMQ介绍 概述 ActiveMQ是Apache软件基金下的一个开源软件&#xff0c;它遵循JMS1.1规范&#xff08;Java Message Service&#xff09;&#xff0c;是消息队列服务&#xff0c;是面向消息中间件&#xff08;MOM&#xff09;的最终实现&#xff0c;它为企业消息传递提供高…

基于腾讯云手把手教你搭建网站全流程,2024年最新建站教程

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网txyfwq.com整理使用腾讯云服务器建站教程&#xff0c;…

2011年认证杯SPSSPRO杯数学建模B题(第一阶段)生物多样性的评估全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 B题 生物多样性的评估 原题再现&#xff1a; 2010 年是联合国大会确定的国际生物多样性年。保护地球上的生物多样性已经越来越被人类社会所关注&#xff0c;相关的大规模科研和考察计划也层出不穷。为了更好地建立国际交流与专家间的合作&…

sql注入技术总结

Sql注入判断数据库类型 Mysql注入 如果对应的表&#xff0c;列名爆不出来&#xff0c;可以尝试用字符转16进制转化。 相关函数&#xff1a; system_user() 系统用户名 user() 用户名 current_user 当前用户名 session_user()连接数据库的用户名 database() 数据库名 ver…

5G Frequency Bands 频率分布

连接&#xff1a;https://www.5g-networks.net/5g-technology/5g-frequency-bands/

项目5-博客系统1(准备工作+博客列表+博客详情页)

1.创建项目 导入以下依赖 2.项目介绍 使⽤SSM框架实现⼀个简单的博客系统 共5个页面 2.1 前端页面展示 2.1.1 用户登录 2.1.2 博客发表页 2.1.3 博客编辑页 2.1.4 博客列表页 2.1.5博客详情页 2.2 功能描述: ⽤⼾登录成功后, 可以查看所有⼈的博客. 点击 <<查看全⽂…

CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)

前言&#xff1a;在我们学习完了html之后&#xff0c;我们就要开始学习三大件中的第二件—CSS&#xff0c;CSS 可以控制多重网页的样式和布局&#xff0c;也就是将我们写好的html代码加上一层华丽的衣裳&#xff0c;使网页变得更加精美。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨…

uni-app如何生成骨架屏

为什么需要骨架屏&#xff1a;为了缓解用户打开程序时等待接口的焦虑情绪 1.打开微信开发者工具&#xff0c;找到模拟器中的页面信息&#xff0c;选择生成骨架屏 2.将生成的wxml代码复制到vscode&#xff0c;在index的components中新建一个vue文件&#xff0c;只需保留请求接口…

RPA实战演练UiBot6.0新食堂一楼问卷星(类似于之前的网页表单提交)

要使用RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;帮助新食堂进行调查问卷&#xff0c;我们可以结合UiBot 6.0来实施具体的计划。以下是一个大致的实战演练计划&#xff1a; 一、目标与需求分析 明确调查目标&#xff1a;了解新食堂…

CentOS7里ifcfg-eth0文件不存在解决方案/Centos7修改网络IP解决方案

Centos7网络IP地址手动设置 1、centos7没有ifcfg-eth0&#xff0c;我的centos7也没有其他博客说的什么ifcfg-ens33、ifcfg-ens32&#xff0c;然后我打开了我这里的ifcfg-eno***&#xff0c;结果发现就是centos6里的ifcfg-eth0里的网络配置。2、vim ifcfg-eno***&#xff08;按t…

34. UE5 RPG实现鼠标点击移动

在前面&#xff0c;我们实现过使用键盘按键wasd去实现控制角色的移动&#xff0c;现在&#xff0c;我们实现了InputAction按键触发&#xff0c;后面&#xff0c;实现一下通过鼠标点击地面实现角色移动。 我们将实现两种效果的切换&#xff0c;如果你点击地面快速松开&#xff0…

突破编程_前端_SVG(circle 圆形)

1 circle 元素的基本属性和用法 SVG 的 <circle> 元素用于在SVG文档中绘制圆形。它具有几个基本属性&#xff0c;允许定义圆形的大小、位置、填充颜色和边框样式。以下是 <circle> 元素的基本属性及其详细解释&#xff1a; 1.1 cx 和 cy 描述&#xff1a;这两个…

Docker容器嵌入式开发:Docker Ubuntu18.04配置mysql数据库

在 Ubuntu 18.04 操作系统中安装 MySQL 数据库的过程。下面是安装过程的详细描述&#xff1a; 首先&#xff0c;使用以下命令安装 MySQL 服务器&#xff1a; sudo apt install mysql-server系统会提示是否继续安装&#xff0c;按下 Y 键确认。 安装过程中&#xff0c;系统会…