最专业的营销网站建设,中国万网怎么自己做网站,app地图下载安装,怎样进网站ftp第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏#xff0c;又增加了哔哩哔哩搜索和必应搜索. !DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport content… 第24次修改了可删除可持久保存的前端html备忘录:文本编辑框不再隐藏又增加了哔哩哔哩搜索和必应搜索. !DOCTYPE html
html langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title与妖为邻备忘录/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;z-index: 9999;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 结束 *//* 中部编辑文本区 .edit_text和搜索区.memo_search *******************开始 *//* ****************编辑文本区 .edit_text 开始 */.edit_text {position: fixed;flex-direction: column;box-sizing: border-box;top: 70px;left: 180px;width: 1284px;border: 1px solid rgb(134, 133, 133);#myForm {border: 1px solid rgb(134, 133, 133);display: flex;flex-direction: column;box-sizing: border-box;width: 530px;border-radius: 10px;input[typefile] {margin: 3px;height: 30px;background-color: #11b711a7;}textarea {z-index: 9999;font-size: 20px;margin: 3px;color: #ffffff;text-shadow: 1px 1px 1px #000;background-color: #062506b5;::placeholder {font-size: 20px;color: #ffffff;}}.abb-text,input[typereset] {width: 55px;margin: 3px 58px;}}/* 文本操作窗口按钮删除按钮.delete 开始 */.delete {position: sticky;top: 0px;background: #f30303;:hover {background: #000;}}/* 文本操作窗口按钮删除按钮.delete 结束 *//* ****编辑文本区 .edit_text 结束 *//* 搜索区.memo_search 开始 */.memo_search {position: absolute;border-radius: 10px;top: -2px;left: 630px;input {/* background-color: #11b711a7; */::placeholder {font-size: 20px;color: #ffffff;}}input[typetext] {background: linear-gradient(to top left, #022c05, #000000);font-size: 25px;width: 440px;border-radius: 5px 0 0 5px;margin: 2px 5px;border: 0px;outline: none;cursor: text;}input[typebutton],button {position: relative;top: -1px;left: -8px;border: 0px;outline: none;background-color: #e4ede4b5;padding: 2px 0px;border-radius: 0 5px 5px 0;:hover {background-color: #ff0202;color: #ffffff;}}}#baidu_list {height: auto;border: 1px solid #ccc;display: none;position: absolute;top: 130px;left: 7px;}#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: 999;}/* 搜索区.memo_search 结束 */}/* 中部编辑文本区 .edit_text和搜索区.memo_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: 100px 180px;font-size: 20px;span {user-select: text;color: #0d7b1c;: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;}}/* ****底部备忘内容区.memo_content_area *****结束 */
/stylebody!-- 左侧本地连接.local_connection 开始 --div classlocal_connectionspan本地连接/spanhr /ullia hrefD:\My homepage\本地连接\js生成随机数.html随机数生成器/a/lilia hrefD:\My homepage\本地连接\本地连接计算器.html计算器/a/lilia hrefD:\My homepage\本地连接\todos备忘录.htmltodos备忘录/a/li!-- lia hrefD:\My homepage\本地连接\长久保存todos.html todos保存/a/li --/ul/div!-- 左侧本地连接.local_connection 结束 ---------------------------------------------------------------------------------!-- 右侧常用网站 .right_websites开始--div classright_websitesspan常用网站/spanhr /ullia hrefhttps://cn.bing.com/search?q%E7%BF%BB%E8%AF%91qsnformQBREsp-1lq0smcsrmainpq%E7%BF%BB%E8%AF%91sc10-2skcvid08CF7C75398B4C3C97E7AEC5D3D0921Fghsh0ghacc0ghpl title在线翻译 classtarget_blank在线翻译/a/liliahrefhttps://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_styleno_headerlangzh-cnutm_sourcebbsutm_mediummysutm_campaignpcicon_markerFps24#/map/2?shown_typesNaN,-1084,508,2center2008.50,-1084.00zoom-3.00title原神大地图 class target_blank原神大地图/a/lilia hrefhttps://www.bilibili.com/ titlebilibili class target_blank哔哩哔哩/a/lilia hrefhttps://www.dedexuexi.com/ target_blank 建站学习网 /a/lilia hrefhttps://www.runoob.com/ title 菜鸟教程 class target_blank菜鸟教程/a/lilia hrefhttps://developer.mozilla.org/zh-CN/ titleMDN网络文档 class target_blankMDN网络文档/a/li/lilia hrefhttps://cn.vuejs.org/ target_blank JavaScript 框架vue /a/lilia hrefhttps://www.w3ccoo.com/ target_blank w3schools 教程 /a/lilia hrefhttps://zh.javascript.info/ target_blank 现代 JavaScript 教程 /a/lilia hrefhttps://www.dedexuexi.com/tool/3D/ target_blank/a/lilia hrefhttps://element-plus.org/zh-CN/ target_blankVue3组件库/a/lilia hrefhttps://blog.csdn.net/lulei5153?spm1011.2415.3001.5343 title与妖为邻CSDN博客 classtarget_blank与妖为邻的CSDN博客/a/ul/div!-- 右侧常用网站 .right_websites结束----------------------------------------------------------------------------------------!-- -------头部标题.header_title 开始 --div classheader_titleimg srcfile:///D:\My homepage\img\jpg\tuzi3.jpg alt与妖为邻h2 classmy_name与妖为邻/h2h2 classmemo备忘录/h2/div!-- 头部中心.header_center 开始 --修改说明.summary 开始 --div classheader_center!-- 修改说明.summary 开始--div classsummary浏览器主页,整理本地资源备忘日常生活、各类教程、网页素材! keytodotext/div span classupdate_summary第24次0.4.0更新/spandiv classcss_summary_collapsediv classupdate_notesp第24次0.4.0更新文本编辑框不再隐藏又增加了哔哩哔哩搜索和必应搜索。/p/div/div!-- 修改说明.summary 结束--div idcurrent_time当前时间/divdiv classheader_navul classheader_paginationlia hreffile:///C:\Users\90917\Desktop\备忘录.html classhome_page首页/a/lilia hrefD:\My homepage\本地连接\mylogs原生备忘录.html日志/a/lilia hrefD:\My homepage\img相册/a/lilia href#更多/a/lilia hrefD:\My homepage\本地连接\html5代码账号密码备忘录样本.html联系我/a/li/ulbutton idopenButton打开本地文件/button/div/div!-- 头部中心 .header_center 结束--!-- 中部编辑文本区 .edit_text和搜索区.memo_search -----开始 --div classedit_text form idmyForminput typefile nameinputfile accepttext/plain, text/css, text/html, text/javascript, text/markdownclassbackground3D /textarea classup-textarea nameuptextarea rows1 cols30%placeholder选择本地txt、js、css或html文件文件内容会被自动读取/textareadivbutton typetext classabb-text添加/buttoninput typereset value重置button iddelete classdelete对选择进行删除/button/div/form!-- 搜索区.memo_search 开始--div classmemo_searchdiv idbilibili_searchform onsubmitreturn bilibili_text()input typetext classbilibili_text placeholder哔哩哔哩 autocompleteoff autofocus!-- input typebutton namebtn idbilibili_btn value哔哩哔哩 onclickreturn search / --button onclickreturn search哔哩哔哩/button/form!-- ul id/ul --div idbing_searchform onsubmitreturn bing_text()input typetext classbing_text placeholder必应搜索button onclickreturn search必应搜索/button/form!-- ul id/ul --/divdiv idbaidu_searchpinput typetext idbaidu_text placeholder百度一下,你就知道input typebutton namebtn idbaidu_btn value百度一下 //pul idbaidu_list/ul/div/div/div!-- 搜索区.memo_search 结束--/div!-- 中部编辑文本区 .edit_text和搜索区.memo_search -----结束 --!-- ------------备忘内容区.memo_content_area *****开始 -----------------------------------------------div classmemo_content_area idmemo/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;//时间月份个位补0day 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);}}/****提示弹窗无需点击的函数*****结束*****************************************//*中部 哔哩哔哩#bilibili_search *******************开始 */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;}/*中部 哔哩哔哩#bilibili_search *******************结束 *//*中部必应搜索#bing_search *******************开始 */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;}/*中部必应搜索#bing_search *******************结束 *//* 中部百度搜索#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 cbcallback;//添加链接及回调函数 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 cl3;}/* 中部百度搜索区#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,divinput typecheckbox namecheckbox span classJS_content ${cls}${val}/span /div)}loadtodo();/**************************打开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
