Sing Me to Sleep
html
<!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><sub
id="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><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¢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;//时间月份个位补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);
/* 当前时间 结束 */
/*全屏*/
document
.getElementById("fullBtn")
.addEventListener("click", function () {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
});
var divCreated = false; // 标志变量，记录是否已经创建了div
function createDiv() {
if (!divCreated) {
// 如果还没有创建过div
var 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和hidden
closeBtn.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>