<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试版备忘录首页</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
body {
background: #0b1b2c;
}
input,
button {
color: #d6d301;
text-shadow: 1px 1px 1px #100000;
font-weight: bold;
cursor: pointer;
}
li {
list-style: none;
}
}
/* 设置全局样式 结束*/
/* 头部区域header */
header {
width: 100vw;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #cbcbcb;
&::before {
content: "";
background-color: #cbcbcb;
width: 15px;
height: 100%;
position: fixed;
right: 1px;
top: 40px;
z-index: 110;
}
/* logo */
figure.logo {
width: 190px;
height: 50px;
/* 缩小 */
transform: scale(0.8);
margin-top: 2px;
margin-left: -15px;
border-radius: 50%;
background: #f30303;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
inset -4px -4px 5px rgba(0, 0, 0, 0.6);
z-index: 99;
figcaption {
background: hsl(0, 0%, 0%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
letter-spacing: -3px;
line-height: 45px;
border-radius: 50%;
font-size: 40px;
width: 152px;
}
.my_name1 {
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
transform: translate(0%, 0%);
}
.my_name2 {
text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translate(0%, -93%);
}
img {
width: 60px;
height: 35px;
margin-top: 7px;
margin-left: 130px;
border-radius: 50%;
transition: transform 0.3s ease;
position: absolute;
&:hover {
transform: scale(1.3);
filter: drop-shadow(0 0 0.3em #ff0202);
}
}
}
figure.logo+a {
position: absolute;
left: 200px;
cursor: pointer;
/* 去掉a标签的下划线 */
text-decoration: none;
}
/* 时间 */
time {
background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 1rem;
}
}
/* 天气样式无效
iframe {
font-size: 2rem;
color: #f30303;
} */
/* 显示所有复选框按钮 */
#showCheckboxesButton {
font-size: 1.5rem;
border-radius: 3px;
background-color: #f30303;
border: none;
padding: 3px;
.countdown {
color: #f30303;
background-color: #f3eb03;
padding: 3px;
}
}
/* 全屏还原关闭按钮 */
menu {
display: flex;
button {
background: none;
border: none;
}
img {
width: 35px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
&:hover {
transform: scale(1.2);
padding: 5px;
background: #ffd000;
}
}
button:nth-child(2) {
display: none;
/* 放大镜效果 */
transform: scale(1.16);
}
}
}
/* 头部区域header 结束 */
/* 中间区域main样式 */
main {
width: 100vw;
height: 96vh;
position: absolute;
top: 4%;
display: flex;
justify-content: center;
/* 左侧导航栏 */
aside.aside_left {
width: 6vw;
height: 96vh;
position: relative;
section {
width: 100%;
height: 98%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-evenly;
&::before {
content: "";
width: 15px;
height: 100%;
position: absolute;
z-index: 120;
background-color: #cbcbcb;
}
article {
height: calc(100% / 3.5);
width: 320%;
position: relative;
z-index: 100;
transform: translateX(-70%);
transition: transform .5s ease-in-out;
button {
width: 35%;
height: 100%;
font: 800 80px '';
background-color: #cbcbcb;
border: none;
transition: background-color .5s ease-in-out;
box-shadow: 0 0 10px rgb(200, 255, 3);
color: rgb(70, 100, 180);
&:hover {
cursor: pointer;
}
}
p {
position: absolute;
/* 使用渐变背景*/
/* background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff); */
/*将背景剪切成文字的形状*/
background-clip: text;
-webkit-background-clip: text;
/*文字颜色设为透明，使文字与背景融为一体*/
-webkit-text-fill-color: transparent;
font-size: 90px;
font-weight: 900;
right: -15px;
/* 文本竖排 */
writing-mode: vertical-rl;
top: calc(50% - 100px);
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
}
}
article.active {
transform: translateX(0);
}
button.active {
color: #feee02d7;
}
}
}
/* 左侧导航栏 结束 */
/* 滑动栏 */
#bar {
position: absolute;
left: 6vw;
height: 98%;
width: 2px;
z-index: 99;
/* background-color: rgb(255, 249, 249); */
p {
position: absolute;
height: calc(100% / 4);
width: 10px;
top: 0px;
left: -1.2px;
background: rgb(250, 4, 168);
transition: transform .5s ease-in-out;
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;
&::before {
content: "";
position: absolute;
height: calc(100% / 1);
width: 10px;
left: -1px;
background: rgb(250, 4, 4);
transition: transform .5s ease-in-out;
border-radius: 10px;
box-shadow: 0 0 10px rgb(200, 255, 3);
}
}
}
/* 滑动栏 结束*/
/* 分页设置 */
#card-section {
height: 100%;
width: 90%;
overflow: hidden;
}
/* 分页设置 结束*/
/* 中间留言区 */
table {
width: 86vw;
margin: 1px 2px;
box-shadow: 0 0 10px rgb(200, 255, 3);
.titleBtn {
display: flex;
text-align: center;
td {
height: 24px;
}
.displayBtn {
color: #67C23A;
background: #0bb811c9;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
width: 30vw;
cursor: pointer;
font-weight: bold;
&:hover {
background-color: #f3d303;
color: #e6a23c;
}
}
marquee {
background: linear-gradient(to right, #4caf4fed, #dc0000cf);
color: #f3d303;
margin: 0;
padding: 0;
width: 26vw;
height: 24px;
}
/* 删除按钮 */
.deleteBtn {
color: #f3d303;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
background: #ff0000;
font-weight: bold;
cursor: pointer;
width: 30vw;
&:hover {
background-color: #f3d303;
color: #ff0505;
}
}
}
}
/* 隐藏的输入框*/
.myDialog {
position: fixed;
top: 6vw;
left: 10vw;
background: #2c3e50;
box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);
border-radius: 8px;
border: 0;
.dialog-form {
box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);
display: flex;
justify-content: space-between;
padding: 5px;
cursor: move;
h2 {
color: #f85f5faf;
text-shadow: 1px 1px 1px #030303;
}
button {
background: #ff000004;
border: none;
font-size: 30px;
/* 放大镜效果 */
transform: scale(1.6);
margin: 0 5px;
width: 30px;
height: 28px;
&:hover {
background-color: #f30303;
border-top-right-radius: 5px;
}
}
}
.textarea-form {
background-color: #144756;
button {
font-size: 18px;
background-color: hsla(160, 100%, 37%, 0.63);
border: 1PX solid #909399;
padding: 1PX;
border-radius: 2PX;
}
#readFolder {
font-size: 18px;
}
#toolbar {
margin: 0 5px 5px 5px;
#editor {
background-color: #909399;
text-shadow: 1px 1px 1px #0a0000;
margin: 5px;
padding: 10px;
border-radius: 5px;
}
}
input[type="file"] {
box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);
margin: 5px;
}
sub {
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px #0a0000;
user-select: text;
}
section {
display: flex;
input,
button {
color: #fffcfc;
text-shadow: 1px 1px 1px #000;
background: #0bb81186;
/* 文本竖排 */
writing-mode: vertical-rl;
/* 文字间距 */
letter-spacing: 20px;
font-size: 25px;
padding-right: 5px;
}
textarea {
background: #0b1b2c;
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px #0a0000;
/* background: #144756bd; */
font-size: 1.2rem;
&::placeholder {
text-align: center;
color: #67C23A;
text-shadow: 1px 1px 1px #0a0000;
}
}
}
}
}
/* 隐藏的输入框 结束 */
/* 留言列表 */
output {
border: 2px solid rgb(134, 133, 133);
background-color: #144756;
width: 85vw;
height: 91vh;
margin-left: 10px;
border-radius: 10px;
display: flex;
align-content: flex-start;
font-size: 20px;
flex-wrap: wrap;
overflow-x: hidden;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
/* 简陋的编辑器 */
.container {
display: flex;
justify-content: start;
}
.file-content {
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
flex: 1;
color: rgba(255, 255, 255, 0.596);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);
float: left;
ul {
list-style-type: none;
padding-left: 20px;
}
li {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
}
}
.delete-button {
margin-left: 10px;
cursor: pointer;
background-color: red;
color: white;
border: none;
padding: 5px;
border-radius: 3px;
}
/* 简陋的编辑器 结束 */
/* 输入框输出的信息 */
.Success {
input[type="checkbox"] {
display: none;
}
.Message {
color: #909399;
margin: 10px;
border-radius: 5px;
text-align: center;
user-select: text;
* {
user-select: text;
}
&:hover {
color: hsla(160, 100%, 37%, 0.63);
background-color: #1b657b4b;
text-shadow: 1px 1px 1px #030303;
}
}
.href {
box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
padding: 2px;
border-radius: 3px;
}
.finish {
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;
}
}
}
/* 输入框输出的信息 结束 */
/* 中间留言区 结束*/
/* 右侧边栏网站收藏 */
aside.aside_right {
color: #ffffff;
flex-wrap: wrap;
overflow-x: hidden;
width: 8vw;
li {
box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
background-color: #f9f9f90c;
margin: 5px;
padding: 2px;
border-radius: 3px;
cursor: pointer;
&:hover {
background-color: #f3d303;
}
a {
font-size: 18px;
color: hsla(160, 100%, 37%, 1);
text-shadow: 1px 1px 1px #100000;
/* 去掉下划线 */
text-decoration: none;
&:hover {
color: #f85f5faf;
display: block;
transform: scale(1.2);
/* 文本居中 */
text-align: center;
}
}
}
}
/* 右侧边栏网站收藏 结束*/
}
/* 中间区域main样式 结束 */
/* 底部footer样式 */
footer {
background-color: #cbcbcb;
width: 100vw;
height: 20px;
position: fixed;
bottom: 0;
left: 0;
text-align: center;
a {
color: #d6d301;
text-shadow: 1px 1px 1px #100000;
font-weight: bold;
cursor: pointer;
}
}
/* 底部footer样式 结束 */
</style>
</head>
<body>
<!-- 头部区域header -->
<header>
<!-- logo -->
<figure class="logo">
<a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" class=""
target="_blank">
<img src="file:///D:/img/icon.ico" alt="与妖为邻">
</a>
<figcaption class="my_name1">与妖为邻</figcaption>
<figcaption class="my_name2">与妖为邻</figcaption>
</figure>
<a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page" title="首页"
target="_blank"><b>
<font color="#e6a23c" size="6">首页</font>
</b></a>
<!-- 时间 -->
<time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time>
<!-- 天气 -->
<iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&id=99">
</iframe>
<button id="showCheckboxesButton">显示所有复选框10秒后自动隐藏</button>
<!-- 全屏还原关闭按钮 -->
<menu>
<button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"
onclick="fullScreen()"></button>
<button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"
onclick="exitFullScreen()"></button>
<button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"> </button>
</menu>
</header>
<!-- 头部区域header 结束 -->
<!-- 中间区域 main -->
<main>
<!-- 左侧导航栏 -->
<aside class="aside_left">
<section>
<article class="active">
<button onclick="slideTo(1)" class="active">首页
<p>首页</p>
</button>
</article>
<article>
<button onclick="slideTo(2)">英语
<p>英语</p>
</button>
</article>
<article>
<button onclick="slideTo(3)">音乐
<p>音乐</p>
</button>
</article>
<article>
<button onclick="slideTo(4)">项目
<p>项目</p>
</button>
</article>
</section>
</aside>
<!-- 左侧导航栏 结束-->
<!-- 滑动栏 -->
<article id="bar">
<p></p>
</article>
<!-- 滑动栏 结束-->
<!-- 中间留言区 -->
<section id="card-section">
<!-- 第一页：首页 -->
<article id="card1">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog.show()">编辑首页页面按钮
</td>
<td>
<marquee behavior="alternate" direction="right">首页杂记 </marquee>
</td>
<td id="delete1" class="deleteBtn">删除首页页面按钮
</td>
</tr>
<tr>
<td>
<!-- <dialog> 元素的 open 属性设置为 true，表示对话框在页面加载时默认打开 -->
<!-- <dialog id="myDialog" class="myDialog" open> -->
<dialog id="myDialog" class="myDialog">
<article class="dialog-form" id="Drag">
<h2>这是个弹窗,是可拖拽的!是可修改本地文本文件的简陋版文本编辑器、浏览器首页、记事本,它只是个58KB的html文件</h2>
<button onclick="myDialog.close()">×</button>
</article>
<form class="textarea-form">
<input type="file" name="file1"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub><button type="button" id="readFolder">简陋版编辑器</button>
<menu id="toolbar">
<button type="button" id="btnBold">加粗</button>
<button type="button" id="btnItalic">斜体</button>
<button type="button" id="btnUnderline">下划线</button>
<button type="button" id="btnStrikeThrough">删除线</button>
<button type="button" id="btnInsertOrderedList">有序列表</button>
<button type="button" id="btnInsertUnorderedList">无序列表</button>
<button type="button" id="btnJustifyLeft">左对齐</button>
<button type="button" id="btnJustifyCenter">居中对齐</button>
<button type="button" id="btnJustifyRight">右对齐</button>
<button type="button" id="btnJustifyFull">两端对齐</button>
<button type="button" id="btnCreateLink">创建链接</button>
<button type="button" id="btnUnlink">取消链接</button>
<button type="button" id="btnInsertImage">插入图片</button>
<button type="button" id="btnForeColor">文字颜色</button>
<button type="button" id="btnBackground">背景颜色</button>
<button type="button" id="btnUndo">撤销</button>
<button type="button" id="btnRedo">重做</button>
<button type="button" id="btnExportHtml">导出HTML</button>
<button type="button" id="btnReset">重置</button>
<p id="editor" contenteditable="true" data-placeholder="在此输入需要编辑的文本"></p>
</menu>
<section>
<input type="reset" value="重置">
<textarea id="textareaHTML" class="textarea1" name="textarea1" rows="18"
cols="125"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取,简陋版编辑器按钮是javascript操作本地文件内容,修改文件内容后,请快捷键ctrl+s保存"></textarea>
<button type="button" class="abb-text1">添加</button>
</section>
</form>
</dialog>
<output id="memo1">
<section class="container">
<article id="fileTree"></article>
<article id="fileContent" class="language-html file-content" contenteditable="true"
style="display: none;">
</article>
</section>
</output>
</td>
</tr>
</table>
</article>
<!-- 第一页：首页 结束-->
<!-- 第二页：英语 -->
<article id="card2">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog2.show()">编辑英语页面按钮 </td>
<td>
<marquee behavior="alternate" direction="right">英语杂记 </marquee>
</td>
<td id="delete2" class="deleteBtn">删除英语页面按钮 </td>
</tr>
<tr>
<td>
<dialog id="myDialog2" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag2">
<h2>这是一个弹窗留言输入框</h2> <button>×</button>
</form>
<form class="textarea-form">
<input type="file" name="file2"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea2" name="textarea2" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text2">添加</button>
</section>
</form>
</dialog>
<output id="memo2"></output>
</td>
</tr>
</table>
</article>
<!-- 第二页：英语 结束 -->
<!-- 第三页：音乐 -->
<article id="card3">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog3.show()">编辑音乐页面按钮 </td>
<td>
<marquee behavior="alternate" direction="right">音乐杂记 </marquee>
</td>
<td id="delete3" class="deleteBtn">删除音乐页面按钮</td>
</tr>
<tr>
<td>
<dialog id="myDialog3" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag3">
<h2>这是一个弹窗留言输入框</h2> <button>×</button>
</form>
<form class="textarea-form">
<input type="file" name="file3"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea3" name="textarea3" rows="18" cols="90%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text3">添加</button>
</section>
</form>
</dialog>
<output id="memo3"></output>
</td>
</tr>
</table>
</article>
<!-- 第三页：音乐 结束 -->
<!-- 第四页：项目 -->
<article id="card4">
<table>
<tr class="titleBtn">
<td class="displayBtn" onclick="myDialog4.show()">编辑项目页面按钮 </td>
<td>
<marquee behavior="alternate" direction="right">项目杂记 </marquee>
</td>
<td id="delete4" class="deleteBtn"> 删除项目页面按钮</td>
</tr>
<tr>
<td>
<dialog id="myDialog4" class="myDialog">
<form class="dialog-form" method="dialog" id="Drag4">
<h2>这是一个弹窗留言输入框</h2> <button>×</button>
</form>
<form class="textarea-form">
<input type="file" name="file4"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
<sub><a
class="href" href=" " target="_blank"></a>
&lt;
&gt;
&nbsp;
<span
style="color: red;user-select: text;">^\s*(?=\r?$)\n</span>
</sub>
<section>
<input type="reset" value="重置">
<textarea class="textarea4" name="textarea4" rows="18" cols="90%"
placeholder="快速去除VS Code自动添加的空行: 通过Ctrl+h快捷键调出替换界面添加 ^\s*(?=\r?$)\n 并Alt+R"></textarea>
<button type="button" class="abb-text4">添加</button>
</section>
</form>
</dialog>
<output id="memo4"></output>
</td>
</tr>
</table>
</article>
<!-- 第四页：项目 结束-->
</section>
<!--中间留言区 结束 -->
<!-- 右侧边栏 -->
<aside class="aside_right">
<h2> 网站收藏</h2>
<details class="webList">
<summary>
收藏列表
</summary>
</details>
<details class="localList">
<summary>
本地列表
</summary>
</details>
</aside>
<!-- 右侧边栏 结束-->
</main>
<!-- 中间区域main 结束-->
<!-- 页脚 -->
<footer>
更新时间： <script>document.write('2024/7/29 20:00:00');</script>
</span>
<a href="https://blog.csdn.net/lulei5153" target="_blank">作者：与妖为邻</a>
刷新时间：
<script>
function formatDate(date) {
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, '0');
const d = String(date.getDate()).padStart(2, '0');
const h = String(date.getHours()).padStart(2, '0');
const M = String(date.getMinutes()).padStart(2, '0');
const s = String(date.getSeconds()).padStart(2, '0');
const W = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const w = W[date.getDay()];
return `${y}-${m}-${d} ${w} ${h}:${M}:${s}`;
}
document.write(formatDate(new Date));
</script>
</footer>
<!-- 页脚 结束-->
<!-- <script src="script.js"> </script> -->
</body>
<script>
/* 现在时间*/
var current_time = document.getElementById("dateTime");
function showTime() {
var now = new Date();
var year = now.getFullYear();
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var day = ("0" + now.getDate()).slice(-2);
var hour = ("0" + now.getHours()).slice(-2);
var min = ("0" + now.getMinutes()).slice(-2);
var second = ("0" + now.getSeconds()).slice(-2);
var week = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
][now.getDay()];
var time = `${year}-${month}-${day}<sub id='sub'>${week}</sub> ${hour}:${min}:${second}`;
current_time.innerHTML = time;
}
showTime();
setInterval(showTime, 1000);
/* 现在时间 结束*/
/* 全屏功能与关闭*/
function fullScreen() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
}
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}
// 获取全屏和还原按钮
var fullScreenBtn = document.querySelector(".fullScreen");
var exitFullScreenBtn = document.querySelector(".exitFullScreen");
// 监听全屏和还原事件
document.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
fullScreenBtn.style.display = "none";
exitFullScreenBtn.style.display = "block";
} else {
fullScreenBtn.style.display = "block";
exitFullScreenBtn.style.display = "none";
}
});
// 关闭当前窗口
function closeAll() {
window.close();
}
/* 全屏功能与关闭 结束*/
/* 左侧导航 */
// 定义变量
let chosenSlideNumber = 1; // 当前选择的幻灯片编号
let offset = 0; // 幻灯片偏移量
let barOffset = 0; // 导航条偏移量
// 切换抽屉面板和按钮状态
function toggleDrawer(previous, current) {
const drawerBoxes = document.querySelectorAll(".aside_left article");
const drawerBtnS = document.querySelectorAll(".aside_left button");
drawerBoxes[previous - 1].classList.toggle("active");
drawerBoxes[current - 1].classList.toggle("active");
drawerBtnS[previous - 1].classList.toggle("active");
drawerBtnS[current - 1].classList.toggle("active");
}
// 移动导航条
function moveBar(barOffset) {
const bar = document.querySelector("#bar p");
bar.style.transform = `translateY(${barOffset}%)`;
}
// 切换到指定编号的幻灯片
function slideTo(slideNumber) {
let previousSlideNumber = chosenSlideNumber;
// 更新偏移量
chosenSlideNumber = slideNumber;
let slideDelta = (slideNumber - previousSlideNumber) * 100;
offset -= slideDelta; // 计算幻灯片偏移量
barOffset += slideDelta; // 计算导航条偏移量
// 切换抽屉面板和按钮状态
toggleDrawer(previousSlideNumber, slideNumber);
// 移动幻灯片和导航条
moveSlides(offset);
moveBar(barOffset);
}
// 移动幻灯片
function moveSlides(offset) {
const slides = document.querySelectorAll("#card-section article");
slides.forEach((slide) => {
slide.style.transform = `translateY(${offset}%)`;
});
}
/*左侧导航结束*/
/*留言内容*/
document.addEventListener("DOMContentLoaded", function () {
const todoContainers = [
{ textarea: ".textarea1", button: ".abb-text1", container: "#memo1", storageKey: "home" },
{ textarea: ".textarea2", button: ".abb-text2", container: "#memo2", storageKey: "newEnglish" },
{ textarea: ".textarea3", button: ".abb-text3", container: "#memo3", storageKey: "newMusic" },
{ textarea: ".textarea4", button: ".abb-text4", container: "#memo4", storageKey: "newProject" },
];
todoContainers.forEach(({ textarea, button, container, storageKey }) => {
const upText = document.querySelector(textarea);
const addTo = document.querySelector(button);
const memo = document.querySelector(container);
addTo.addEventListener("click", function () {
if (upText.value.trim() !== "") {
insertHtml(memo, upText.value, "");
upText.value = "";
upText.focus();
saveTodo();
} else {
alert("内容为空，无法添加！");
}
});
function saveTodo() {
let todoArr = Array.from(memo.querySelectorAll(".Message")).map(
(content) => ({
name: content.innerHTML,
finish: content.classList.contains("finish"),
})
);
localStorage.setItem(storageKey, JSON.stringify(todoArr));
}
function loadTodo() {
try {
let todoArr = JSON.parse(localStorage.getItem(storageKey) || "[]");
todoArr.forEach((todo) => {
insertHtml(memo, todo.name, todo.finish ? "finish" : "");
});
} catch (e) {
console.error(`Failed to load todo for ${storageKey}`, e);
}
}
memo.addEventListener("click", function (event) {
const target = event.target;
const tgKids = target.parentElement.children;
if (tgKids[0].checked) {
tgKids[1].classList.add("finish");
} else {
tgKids[1].classList.remove("finish");
}
saveTodo();
});
document
.getElementById(
`delete${button === ".abb-text" ? "" : button.match(/\d+/)[0]}`
)
.addEventListener("click", function () {
const checkedBoxes = memo.querySelectorAll("input[name='checkbox']:checked");
if (checkedBoxes.length === 0) {
alert("没有选择任何项目");
} else {
if (confirm("是否删除所选？")) {
checkedBoxes.forEach((checkbox) => {
checkbox.parentElement.remove();
});
saveTodo();
updateIndexes(); // 更新序号
}
}
});
// 添加动态id属性
function generateUniqueId() {
return 'checkbox-' + Math.random().toString(36).substr(2, 9);
}
function insertHtml(target, val, cls) {
const uniqueId = generateUniqueId();
const index = getNextIndex();
target.insertAdjacentHTML(
"beforeend",
`<div class='Success'>
${index}.
<input type="checkbox" name='checkbox' id='${uniqueId}'>
<label class='Message ${cls}' for='${uniqueId}'> ${val}</label>
</div>`
);
}
let indexCounter = 1;
function getNextIndex() {
return indexCounter++;
}
function updateIndexes() {
const messages = memo.querySelectorAll('.Success');
messages.forEach((message, index) => {
message.firstChild.textContent = `${index + 1}.`;
});
indexCounter = messages.length + 1; // 更新计数器
}
// 显示所有复选框10秒后自动隐藏
document.getElementById('showCheckboxesButton').addEventListener('click', function () {
// 获取所有带有 name='checkbox' 的复选框
const checkboxes = document.querySelectorAll('input[name="checkbox"]');
// 遍历并显示每个复选框
checkboxes.forEach(function (checkbox) {
checkbox.style.display = 'inline'; // 或其他你希望的显示方式
});
// 10秒倒计时
let countdown = 10;
const countdownInterval = setInterval(function () {
// 使用padStart方法将个位数补0
const countdownWithZero = countdown.toString().padStart(2, '0');
document.getElementById('showCheckboxesButton').innerHTML = `显示所有复选框 <span class='countdown'>${countdownWithZero}</span> 秒后自动隐藏`;
countdown--;
if (countdown < 0) {
clearInterval(countdownInterval);
document.getElementById('showCheckboxesButton').textContent = '显示所有复选框10秒后自动隐藏';
// 隐藏复选框
checkboxes.forEach(function (checkbox) {
checkbox.style.display = 'none'; // 或其他你希望的隐藏方式
});
}
}, 1000); // 每秒更新一次
});
// 在页面加载时调用持久化存储的loadTodo()函数
loadTodo();
});
});
/*本地文件上传添加按钮*/
window.onload = function () {
var setups = [
{ textName: "textarea1", fileName: "file1" },
{ textName: "textarea2", fileName: "file2" },
{ textName: "textarea3", fileName: "file3" },
{ textName: "textarea4", fileName: "file4" },
];
setups.forEach(function (setup) {
var text = document.getElementsByName(setup.textName)[0];
var inputFile = document.getElementsByName(setup.fileName)[0];
if (text && inputFile) {
// 检查元素是否存在
inputFile.onchange = function () {
var reader = new FileReader();
reader.readAsText(this.files[0], "UTF-8");
reader.onload = function () {
text.value = this.result;
};
reader.onerror = function () {
console.error("Failed to read file: " + reader.error);
alert("Failed to read file. Please try again.");
};
};
}
});
};
/*本地文件上传添加按钮 结束*/
/* 右侧边栏网站收藏 */
const webList = document.querySelector(".webList");
const localList = document.querySelector(".localList");
const webLinks = [
{ title: "智能翻译", src: "https://fanyi.baidu.com" },
{ title: "哔哩哔哩", src: "https://www.bilibili.com" },
{ title: "百度一下，你就知道", src: "https://www.baidu.com" },
{ title: "菜鸟教程", src: "https://www.runoob.com/" },
{ title: "Electron中文网", src: "https://www.electronjs.org/zh/docs/latest/" },
{ title: "制作ico图标", src: "https://www.bitbug.net" },
{ title: "Element组件", src: "https://element-plus.org/zh-CN/" },
{ title: "原神大地图", src: "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: "vue.js", src: "https://cn.vuejs.org/" },
{ title: "w3schools教程", src: "https://www.w3ccoo.com/" },
{ title: "现代JS教程", src: "https://zh.javascript.info/" },
{ title: "CSS3D字体", src: "https://www.dedexuexi.com/tool/3D/" },
{ title: "MDN网络文档", src: "https://developer.mozilla.org/zh-CN/" },
{ title: "UI组件", src: "https://uiverse.io/switches" },
{ title: "IconFont图标", src: "https://www.iconfont.cn/" },
{ title: "vue图标", src: "https://vue-icons.kalimah-apps.com/" },
{ title: "GitHub", src: "https://github.com" },
{ title: "江下科技", src: "https://www.onlinedo.cn/" },
];
const localLinks = [
{ title: "myLogs备忘录", src: "file:///D:/web/html备忘录/html/myLogs备忘录.html" },
{ title: "简单的计算器", src: "file:///D:/web/html备忘录/html/简单的计算器.html" },
{ title: "html表格", src: "file:///D:/web/html备忘录/html/html表格.html" },
{ title: "js生成随机数", src: "file:///D:/web/html备忘录/html/js生成随机数.html" },
{ title: "html5代码账号密码备忘录样本", src: "file:///D:/web/html备忘录/html/html5代码账号密码备忘录样本.html" },
{ title: "特别的时钟特别的倒计时", src: "file:///D:/web/html备忘录/html/特别的时钟特别的倒计时.html" },
{ title: "查看key值页面", src: "file:///D:/web/html备忘录/html/真/查看key值页面.html" },
];
const createLink = (title, src) => {
if (!title || !src) {
console.error("链接缺少必要的属性");
return null;
}
const link = document.createElement("a");
link.href = src;
link.target = "_blank";
link.innerText = title;
return link;
};
const createList = (list, parent) => {
if (!parent) {
console.error("父元素未找到");
return;
}
const ul = document.createElement("ul");
list.forEach((item) => {
const link = createLink(item.title, item.src);
if (link) {
const li = document.createElement("li");
li.appendChild(link);
ul.appendChild(li);
}
});
parent.appendChild(ul);
};
createList(webLinks, webList);
createList(localLinks, localList);
/* 右侧边栏网站收藏 结束 */
/* 通用的拖动功能 */
/* 通用的拖动功能 */
const initDragAndDisplay = (hiddenElementId, dragElementId) => {
const hiddenElement = document.querySelector(hiddenElementId);
document.querySelector(dragElementId).addEventListener("mousedown", (e) => {
const x = e.pageX - hiddenElement.offsetLeft;
const y = e.pageY - hiddenElement.offsetTop;
const move = (e) => {
hiddenElement.style.left = e.pageX - x + "px";
hiddenElement.style.top = e.pageY - y + "px";
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", move);
}, { once: true });
});
};
/* 初始化所有的拖动按钮 */
const initAllDragsAndDisplays = () => {
["", "2", "3", "4"].forEach((num) => {
initDragAndDisplay(`#myDialog${num}`, `#Drag${num}`);
});
};
initAllDragsAndDisplays();
/* 4个拖动按钮的实现结束*/
/*编辑文本输入框的占位符占位符*/
document.addEventListener('DOMContentLoaded', function () {
const editor = document.getElementById('editor');
const placeholder = editor.getAttribute('data-placeholder');
editor.addEventListener('focus', function () {
if (editor.textContent === placeholder) {
editor.textContent = '';
editor.style.color = ''; // 恢复默认颜色
}
});
editor.addEventListener('blur', function () {
if (editor.textContent === '') {
editor.textContent = placeholder;
editor.style.color = 'gray'; // 设置占位符颜色
}
});
// 初始化时检查内容
if (editor.textContent === '') {
editor.textContent = placeholder;
editor.style.color = 'gray'; // 设置占位符颜色
}
});
/*编辑文本输入框的占位符 结束*/
/* 编辑文本输入框的清空按钮 */
document.getElementById('btnReset').addEventListener('click', function () {
document.getElementById('editor').innerText = '';
});
/* 简单的文本编辑器 */
document.addEventListener('DOMContentLoaded', () => {
const editor = document.getElementById('editor');
const exportedHtml = document.getElementById('textareaHTML');
function execCmd(command, value = null) {
document.execCommand(command, false, value);
}
function exportHtml() {
exportedHtml.value = editor.innerHTML;
}
document.getElementById('toolbar').addEventListener('click', (event) => {
const target = event.target;
const command = target.id.replace('btn', '');
switch (command) {
case 'Bold':
case 'Italic':
case 'Underline':
case 'StrikeThrough':
case 'InsertOrderedList':
case 'InsertUnorderedList':
case 'JustifyLeft':
case 'JustifyCenter':
case 'JustifyRight':
case 'JustifyFull':
case 'Unlink':
case 'Undo':
case 'Redo':
execCmd(command);
break;
case 'CreateLink':
case 'InsertImage':
case 'ForeColor':
case 'Background':
const value = prompt(`输入${command === 'CreateLink' ? '链接地址' : command === 'InsertImage' ? '图片地址' : command === 'ForeColor' ? '文字颜色' : '背景颜色'}`, command === 'CreateLink' ? 'http://' : command === 'InsertImage' ? 'http://' : command === 'ForeColor' ? '#000000' : '#ffff00');
execCmd(command, value);
break;
case 'ExportHtml':
exportHtml();
break;
}
});
editor.focus();
});
/*简单的文本编辑器 结束*/
/*简陋html文本编辑器*/
let currentFileHandle = null; // 变量用于存储当前文件句柄
document.getElementById('readFolder').addEventListener('click', async () => {
try {
const directoryHandle = await window.showDirectoryPicker();
const fileTree = document.getElementById('fileTree');
const fileContent = document.getElementById('fileContent');
fileTree.innerHTML = ''; // 清空文件树内容
fileContent.innerHTML = ''; // 清空文件内容区域
async function readDirectory(directoryHandle, parentElement) {
const ul = document.createElement('ul');
parentElement.appendChild(ul);
for await (const entry of directoryHandle.values()) {
const li = document.createElement('li');
const entryName = document.createElement('span');
entryName.textContent = entry.name;
li.appendChild(entryName);
ul.appendChild(li);
if (entry.kind === 'directory') {
entryName.textContent = `[文件夹] ${entry.name}`;
li.addEventListener('click', async (e) => {
e.stopPropagation();
if (li.classList.contains('open')) {
li.classList.remove('open');
li.querySelector('ul').remove();
} else {
li.classList.add('open');
await readDirectory(entry, li);
}
});
} else if (entry.kind === 'file') {
li.addEventListener('click', async (e) => {
e.stopPropagation();
currentFileHandle = entry;
const file = await entry.getFile();
fileContent.style.display = 'block';
fileContent.textContent = await file.text();
});
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.classList.add('delete-button');
deleteButton.addEventListener('click', async (e) => {
e.stopPropagation();
if (confirm(`确定删除 ${entry.name}?`)) {
await directoryHandle.removeEntry(entry.name);
li.remove();
fileContent.innerHTML = '';
alert('文件删除成功!');
}
});
entryName.appendChild(deleteButton);
}
}
}
await readDirectory(directoryHandle, fileTree);
} catch (error) {
console.error('操作失败:', error);
alert('操作失败，请重试。');
}
});
document.addEventListener('keydown', async (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
try {
if (currentFileHandle) {
const writable = await currentFileHandle.createWritable();
await writable.write(document.getElementById('fileContent').textContent);
await writable.close();
alert('文件保存成功!');
}
} catch (error) {
console.error('保存失败:', error);
alert('保存失败，请重试。');
}
}
});
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
