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