自制的浏览器主页，可以是最简单的桌面应用，可以把它当成备忘录桌面应用。如果你看不懂，请留言。
完整代码：
<!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="index.css"> -->
</head>
<style>
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: #2c3e50;
}
.divBtn,
input,
button {
color: #d6d301;
/* color: hsla(160, 100%, 37%, 1); */
text-shadow: 1px 1px 1px #100000;
font-weight: bold;
cursor: pointer;
}
li {
list-style: none;
}
/* 设置全局样式 结束*/
/* 整体布局上下divBox设置 */
.divBox {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 整体布局上下divBox 结束 */
/* 上部页眉header设置 */
.header {
background-color: #cbcbcba7;
width: 100vw;
height: 40px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 1.5rem;
box-shadow: 0 0 10px rgb(200, 255, 3);
&::before {
content: "";
background-color: #cbcbcb;
width: 15px;
height: 100%;
position: fixed;
right: 1px;
top: 40px;
z-index: 110;
box-shadow: 0 0 10px rgb(200, 255, 3);
}
/* logo */
.logo {
div {
/* 放大镜效果 */
transform: scale(1.5);
position: fixed;
z-index: 99999;
top: 10px;
left: 30px;
}
img {
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
transition: transform 0.3s ease;
&:hover {
transform: scale(1.2);
}
}
h2 {
font-size: 15px;
width: 90px;
color: azure;
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: -5px;
}
}
/* logo 结束*/
#time {
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);
sub {
-webkit-text-fill-color: #cfd601;
text-shadow: 1px 1px 1px #100000;
font-size: 1rem;
}
}
}
/* 上部页眉header设置 结束 */
/* 下部内容content设置 */
.content {
width: 100vw;
height: 96vh;
position: absolute;
top: 4%;
display: flex;
justify-content: center;
align-items: center;
/* 点击区域设置 */
#click-section {
width: 8%;
height: 100%;
position: relative;
/* 抽屉盒子设置 */
#drawerBoxes {
width: 100%;
height: 100%;
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;
}
/* 竖条线设置 结束 */
.drawerBox {
height: calc(100% / 3.5);
width: 120%;
position: relative;
z-index: 100;
transform: translateX(-70%);
transition: transform .5s ease-in-out;
.drawer-btn {
width: 80%;
height: 100%;
font: 800 80px '';
background-color: #cbcbcba7;
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;
}
.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: 100px;
font-weight: 900;
right: -90px;
/* 文本竖排 */
writing-mode: vertical-rl;
top: calc(50% - 100px);
text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
}
}
}
.drawerBox.active {
transform: translateX(0);
}
.drawer-btn.active {
color: #feee02d7;
}
/* 抽屉盒子设置 */
}
/* 点击区域设置 结束 */
}
#slide-section {
position: relative;
height: 100%;
width: 92%;
margin: 0 10px;
}
/* 分隔线设置 */
#slide-bar {
position: absolute;
left: -10px;
height: 100%;
width: 2px;
background-color: rgb(255, 249, 249);
#bar {
position: absolute;
height: calc(100% / 4);
width: 10px;
top: 0;
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;
}
}
/* 分隔线 结束设置 */
/* 分页设置 */
#card-section {
height: 100%;
width: 90%;
overflow: hidden;
}
}
/* 分页设置 结束 */
/* 留言板设置 */
.centre {
width: 85vw;
height: 96vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.displayBtn {
display: flex;
color: #E6A23C;
text-align: center;
i {
width: 100%;
}
i:first-of-type {
background: #0bb811c9;
}
.marquee {
background: linear-gradient(to right, #4caf4fed, #dc0000cf);
color: #f3d303;
margin: 0;
padding: 0;
}
/* 删除按钮 */
.deleteBtn {
color: #f3d303;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
background: #ff0000;
font-weight: bold;
cursor: pointer;
&:hover {
background-color: #f3d303;
color: #ff0505;
}
}
}
/* 隐藏文本操作窗口开始 */
.hidden {
background: #2c3e50;
box-shadow: 0 0 10px rgba(255, 254, 254, 0.5);
display: none;
position: fixed;
flex-direction: column;
transform: translate(10%, 1%);
border-radius: 8px;
z-index: 9;
.Drag {
box-shadow: 0 0 10px rgba(93, 93, 93, 0.537);
color: #ffffffce;
height: 35px;
display: flex;
justify-content: space-between;
font-size: 1.5rem;
cursor: move;
p {
margin: 0 10px;
}
i {
font-style: normal;
margin: 0 10px;
cursor: pointer;
&:hover {
color: #f30303;
}
}
}
.form {
display: flex;
flex-direction: column;
background-color: rgba(20, 20, 20, 0.5);
margin: 10px;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(255, 254, 254, 0.5);
z-index: 10;
input[type="file"] {
width: 100%;
background: #67c23a3e;
}
sub {
margin: 10px 0;
user-select: text;
color: hsla(160, 100%, 37%, 1);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);
text-align: center;
}
div {
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 {
color: #E6A23C;
text-shadow: 1px 1px 1px #100000;
background: #144756bd;
font-size: 1.5rem;
&::placeholder {
text-align: center;
}
}
}
}
}
/* 隐藏文本操作窗口结束 */
.memo {
border: 2px solid rgb(134, 133, 133);
background-color: #144756;
width: 96%;
height: 92vh;
margin: 0 2px;
border-radius: 10px;
display: flex;
align-content: flex-start;
font-size: 20px;
flex-wrap: wrap;
overflow-x: hidden;
box-shadow: 0 0 10px rgb(200, 255, 3);
pre,
span {
user-select: text;
color: hsla(160, 100%, 37%, 0.63);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);
margin: 10px;
border-radius: 5px;
&:hover {
color: #f85f5faf;
background-color: #1b657b4b;
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);
border-radius: 10px;
}
}
.a_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;
}
}
}
/* 留言板设置 结束 */
.author {
background: #cbcbcba7;
box-shadow: 0 0 10px rgb(200, 255, 3);
}
/* 下部内容content设置 结束 */
/* 右侧webContent设置 */
.webContent {
color: #ffffff;
position: fixed;
top: 30px;
right: -10px;
width: 170px;
text-align: center;
h2 {
margin: 0px 30px 0 0;
padding: 10px;
}
li {
color: hsla(160, 100%, 37%, 1);
text-shadow: 1px 1px 1px #100000;
box-shadow: 1px 1px 2px 2px rgba(255, 251, 251, 0.5);
background-color: #f9f9f90c;
width: 140px;
margin: 2px;
font-size: 18px;
padding: 2px;
border-radius: 3px;
cursor: pointer;
&:hover {
background-color: #f3d303;
color: #ff0505;
transition: all 0.5s ease;
transform: scale(1.2) translateX(-25px);
}
}
/* 右侧webContent设置 结束 */
}
</style>
<body>
<!-- 整体布局上下divBox -->
<div id="divBox" class="divBox">
<!-- 上部页眉header 我们让它成为下面的公共部分，这样可以让我们在其他页面也能使用它。-->
<div class="header">
<!-- logo -->
<div class="logo">
<div>
<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>
<h2 class="my_name">与妖为邻</h2>
<h2 class="memo">备忘录</h2>
</div>
</div>
<!-- logo 结束 -->
<!-- 时间 -->
<div id="time">现在时间</div>
<!-- 天气-->
<!--frameborder="0"：规定框架边框宽度 scrolling="no"表示不显示滚动条。 hspace="0"表示框架内容与框架边框的距离。 -->
<iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&id=99"></iframe>
<div class="divBtn" onclick="closeAllWindows()">关闭全部新窗口</div>
<div id="fullBtn" class="divBtn">全屏</div>
</div>
<!-- 上部页眉header 结束 -->
<!-- 下部内容content 我们让出现不同的页面内容-->
<div class="content">
<!-- 左侧菜单点击区域 -->
<div id="click-section">
<div id="drawerBoxes">
<div class="drawerBox active">
<button class="drawer-btn active" onclick="slideTo(1)">首页
<span class="drawer-head">首页</span>
</button>
</div>
<div class="drawerBox">
<button class="drawer-btn" onclick="slideTo(2)">英语
<span class="drawer-head">英语</span>
</button>
</div>
<div class="drawerBox">
<button class="drawer-btn" onclick="slideTo(3)">项目
<span class="drawer-head">项目</span>
</button>
</div>
<div class="drawerBox">
<button class="drawer-btn" onclick="slideTo(4)">音乐
<span class="drawer-head">音乐</span>
</button>
</div>
</div>
</div>
<!-- 左侧菜单点击区域 结束 -->
<!-- 中间内容slide-section -->
<div id="slide-section">
<!-- 分隔线 -->
<div id="slide-bar">
<div id="bar">
</div>
</div>
<!-- 分隔结束线 -->
<!-- 分页内容 -->
<div id="card-section">
<!-- 第一页： -->
<div id="card1" class="card">
<!-- 页面中心留言区 -->
<div id="centre" class="centre">
<div class="displayBtn">
<i id="displayBtn" class="divBtn">编辑首页页面按钮</i>
<marquee class="marquee" behavior="alternate" direction="right">首页杂记
</marquee>
</marquee><i id="delete" class="deleteBtn"> 删除首页页面按钮</i>
</div>
<!-- /* 隐藏文本操作窗口开始 */ -->
<div id="hidden" class="hidden">
<div id="Drag" class="Drag">
<p>文本操作</p>
<i id="closeBtn">×</i>
</div>
<form class="form">
<input type="file" name="file"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" class="file" />
<sub><a class="a_href" href=" " target="_blank"></a> <&lt
&gt ></sub><!--<sub>快速去除VS Code自动添加的空行:
通过Ctrl+h快捷键调出替换界面添加
<br>
<span style="color: red;">^\s*(?=\r?$)\n</span>
<br>
并Alt+R </sub>-->
<div>
<input type="reset" value="重置">
<textarea class="textarea" name="textarea" rows="18" cols="80%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text">添加</button>
</div>
</form>
</div>
<!-- /* 隐藏文本操作窗口结束 */ -->
<div id="memo" class="memo"></div>
<button class="author">作者：与妖为邻</button>
</div>
<!-- 页面中心留言区 结束 -->
</div>
<!-- 第一页：结束 -->
<!-- 第二页： -->
<div id="card2" class="card">
<!-- 页面中心留言区 -->
<div id="centre" class="centre">
<div class="displayBtn">
<i id="displayBtn2" class="divBtn">编辑英语备忘信息按钮</i>
<marquee class="marquee" behavior="alternate" direction="right">英语备忘录
</marquee>
</marquee><i id="delete2" class="deleteBtn"> 删除英语备忘信息按钮</i>
</div>
<!-- /* 隐藏文本操作窗口开始 */ -->
<div id="hidden2" class="hidden">
<div id="Drag2" class="Drag">
<p>文本操作</p>
<i id="closeBtn2">×</i>
</div>
<form class="form">
<input type="file" name="file2"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" class="file2" />
<sub><a class="a_href" href=" " target="_blank"></a> <&lt
&gt ></sub><!--<sub>快速去除VS Code自动添加的空行:
通过Ctrl+h快捷键调出替换界面添加
<br>
<span style="color: red;">^\s*(?=\r?$)\n</span>
<br>
并Alt+R </sub>-->
<div>
<input type="reset" value="重置">
<textarea class="textarea2" name="textarea2" rows="18" cols="80%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text2">添加</button>
</div>
</form>
</div>
<!-- /* 隐藏文本操作窗口结束 */ -->
<div id="memo2" class="memo"></div>
<button class="author">作者：与妖为邻</button>
</div>
<!-- 页面中心留言区 结束 -->
</div>
<!-- 第二页：结束 -->
<!-- 第三页： -->
<div id="card3" class="card">
<!-- 页面中心留言区 -->
<div id="centre" class="centre">
<div class="displayBtn">
<i id="displayBtn3" class="divBtn">编辑项目备忘信息按钮</i>
<marquee class="marquee" behavior="alternate" direction="right">项目备忘录
</marquee>
</marquee><i id="delete3" class="deleteBtn"> 删除项目备忘信息按钮</i>
</div>
<!-- /* 隐藏文本操作窗口开始 */ -->
<div id="hidden3" class="hidden">
<div id="Drag3" class="Drag">
<p>文本操作</p>
<i id="closeBtn3">×</i>
</div>
<form class="form">
<input type="file" name="file3"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" class="file3" />
<sub><a class="a_href" href=" " target="_blank"></a> <&lt
&gt ></sub><!--<sub>快速去除VS Code自动添加的空行:
通过Ctrl+h快捷键调出替换界面添加
<br>
<span style="color: red;">^\s*(?=\r?$)\n</span>
<br>
并Alt+R </sub>-->
<div>
<input type="reset" value="重置">
<textarea class="textarea3" name="textarea3" rows="18" cols="80%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text3">添加</button>
</div>
</form>
</div>
<!-- /* 隐藏文本操作窗口结束 */ -->
<div id="memo3" class="memo"></div>
<button class="author">作者：与妖为邻</button>
</div>
<!-- 页面中心留言区 结束 -->
</div>
<!-- 第三页：结束 -->
<!-- 第四页： -->
<div id="card4" class="card">
<!-- 页面中心留言区 -->
<div id="centre" class="centre">
<div class="displayBtn">
<i id="displayBtn4" class="divBtn">编辑音乐备忘信息按钮</i>
<marquee class="marquee" behavior="alternate" direction="right">音乐备忘信息
</marquee>
</marquee><i id="delete4" class="deleteBtn"> 删除音乐备忘信息按钮</i>
</div>
<!-- /* 隐藏文本操作窗口开始 */ -->
<div id="hidden4" class="hidden">
<div id="Drag4" class="Drag">
<p>文本操作</p>
<i id="closeBtn4">×</i>
</div>
<form class="form">
<input type="file" name="file4"
accept="text/plain, text/css, text/html, text/javascript, text/markdown" class="file4" />
<sub><a class="a_href" href=" " target="_blank"></a> <&lt
&gt ></sub><!--<sub>快速去除VS Code自动添加的空行:
通过Ctrl+h快捷键调出替换界面添加
<br>
<span style="color: red;">^\s*(?=\r?$)\n</span>
<br>
并Alt+R </sub>-->
<div>
<input type="reset" value="重置">
<textarea class="textarea4" name="textarea4" rows="18" cols="80%"
placeholder="选择txt、js、css或html文件,文件内容会被自动读取"></textarea>
<button type="button" class="abb-text4">添加</button>
</div>
</form>
</div>
<!-- /* 隐藏文本操作窗口结束 */ -->
<div id="memo4" class="memo"></div>
<button class="author">作者：与妖为邻</button>
</div>
<!-- 页面中心留言区 结束 -->
</div>
<!-- 第四页：结束 -->
</div>
<!-- 分页内容结束 -->
</div>
<!-- 中间内容slide-section 结束 -->
</div>
<!-- 下部内容content 结束 -->
</div>
<!-- 整体布局上下divBox 结束 -->
<!-- 右侧内容webContent 是浮动的右侧内容，我们将它放在body的最后，这样可以让它始终在页面最右侧。 -->
<div class="webContent">
<h2>网站收藏</h2>
<div id="webList"></div>
<div id="localList"></div>
</div>
<!-- 右侧内容webContent 结束 -->
<!-- <script src="index.js"></script> -->
</body>
<script>
/* 现在时间*/
var current_time = document.getElementById("time");
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);
/* 现在时间 结束*/
/* 全屏功能*/
document.getElementById("fullBtn").addEventListener("click", function () {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
});
/* 全屏功能 结束*/
/* 左侧导航 */
// 定义变量
let chosenSlideNumber = 1; // 当前选择的幻灯片编号
let offset = 0; // 幻灯片偏移量
let barOffset = 0; // 导航条偏移量
// 获取幻灯片区域
const slideSection = document.querySelector("#slide-section");
// 切换到指定编号的幻灯片
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 toggleDrawer(previous, current) {
const drawerBoxes = document.querySelectorAll(".drawerBox");
const drawerBtnS = document.querySelectorAll(".drawer-btn");
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 moveSlides(offset) {
const slides = document.querySelectorAll(".card");
slides.forEach((slide) => {
slide.style.transform = `translateY(${offset}%)`;
});
}
// 移动导航条
function moveBar(barOffset) {
const bar = document.querySelector("#bar");
bar.style.transform = `translateY(${barOffset}%)`;
}
/*左侧导航结束*/
/* 关闭全部新窗口*/
let newWindows = [];
// 关闭所有新打开的窗口
function closeAllWindows() {
newWindows.forEach((win) => {
if (win && !win.closed) {
win.close();
}
});
newWindows = [];
}
// 初始化链接列表
function initializeLinkList() {
const localLinks = [
{ title: "myLogs备忘录", src: "./html/myLogs备忘录.html" },
{ title: "简单的计算器", src: "./html/简单的计算器.html" },
{ title: "html表格", src: "./html/html表格.html" },
{ title: "js生成随机数", src: "./html/js生成随机数.html" },
// { title: "自动生成220个li(颜色随机)", src: "./html/自动生成220个li(颜色随机).html" },
{
title: "html5代码账号密码备忘录样本",
src: "./html/html5代码账号密码备忘录样本.html",
},
{
title: "特别的时钟特别的倒计时",
src: "D:/web/备忘录/html备忘录/html/特别的时钟特别的倒计时.html",
},
{
title: "查看key值页面",
src: "D:/web/备忘录/html备忘录/html/真/查看key值页面.html",
},
];
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" },
];
createLinkList("localList", localLinks);
createLinkList("webList", webLinks);
}
// 创建链接列表
function createLinkList(containerId, links) {
const container = document.getElementById(containerId);
if (!container) {
console.error(`Element with ID '${containerId}' not found.`);
return;
}
const ul = document.createElement("ul");
links.forEach((link) => {
const li = document.createElement("li");
li.textContent = link.title;
if (!link.src) {
li.classList.add("disabled");
} else {
li.onclick = () => {
openLinkInNewWindow(link.src);
};
}
ul.appendChild(li);
});
container.appendChild(ul);
}
// 在新窗口中打开链接
function openLinkInNewWindow(url) {
const newWindow = window.open(
url,
"_blank",
"width=900,height=680,top=200,left=400"
);
if (newWindow) {
newWindows.push(newWindow);
newWindow.focus();
}
}
initializeLinkList();
/* 关闭全部新窗口 结束*/
/*留言内容*/
document.addEventListener("DOMContentLoaded", function () {
const todoContainers = [
{
textarea: ".textarea",
button: ".abb-text",
container: "#memo",
storageKey: "home",
},
{
textarea: ".textarea2",
button: ".abb-text2",
container: "#memo2",
storageKey: "newEnglish",
},
{
textarea: ".textarea3",
button: ".abb-text3",
container: "#memo3",
storageKey: "newProject",
},
{
textarea: ".textarea4",
button: ".abb-text4",
container: "#memo4",
storageKey: "newMusic",
},
];
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(".JS_content")).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 () {
if (confirm("是否删除所选？")) {
memo
.querySelectorAll("input[name='checkbox']:checked")
.forEach((checkbox) => {
checkbox.parentElement.remove();
});
saveTodo();
}
});
function insertHtml(target, val, cls) {
target.insertAdjacentHTML(
"beforeend",
`<div class='dddd'>
<input type="checkbox" name='checkbox'>
<span class='JS_content ${cls}'>${val}</span>
</div>`
);
}
// 在页面加载时调用持久化存储的loadTodo()函数
loadTodo();
});
});
/*本地文件上传添加按钮*/
window.onload = function () {
var setups = [
{ textName: "textarea", fileName: "file" },
{ 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.");
};
};
}
});
};
/*33333*/
/* 4个拖动按钮的实现*/
const ThreeDragBtn = () => {
function toggleDisplay(displayBtnId, closeBtnId, hiddenElementId) {
var hiddenElement = document.querySelector(hiddenElementId);
document
.querySelector("#" + displayBtnId)
.addEventListener("click", function () {
hiddenElement.style.display = "block";
});
document.querySelector("#" + closeBtnId).addEventListener("click", function () {
hiddenElement.style.display = "none";
});
}
function enableDrag(dragElementId, hiddenElementId) {
var hiddenElement = document.querySelector(hiddenElementId);
document
.querySelector(dragElementId)
.addEventListener("mousedown", function (e) {
var x = e.pageX - hiddenElement.offsetLeft;
var y = e.pageY - hiddenElement.offsetTop;
function move(e) {
hiddenElement.style.left = e.pageX - x + "px";
hiddenElement.style.top = e.pageY - y + "px";
}
document.addEventListener("mousemove", move);
document.addEventListener(
"mouseup",
function () {
document.removeEventListener("mousemove", move);
},
{ once: true }
);
});
}
toggleDisplay("displayBtn", "closeBtn", "#hidden");
toggleDisplay("displayBtn2", "closeBtn2", "#hidden2");
toggleDisplay("displayBtn3", "closeBtn3", "#hidden3");
toggleDisplay("displayBtn4", "closeBtn4", "#hidden4");
enableDrag("#Drag", "#hidden");
enableDrag("#Drag2", "#hidden2");
enableDrag("#Drag3", "#hidden3");
enableDrag("#Drag4", "#hidden4");
};
ThreeDragBtn();
/* 4个拖动按钮的实现结束*/
/*留言内容 结束*/
</script>
</html>如果你看不懂，请留言。或者请您使用VS Code安装Fitten Code: Faster and Better AI Assistant扩展插件，让它解释你不懂的代码，如果你复制上面代码没有效果，请留言。您也可以使用VS Code安装Fitten Code: Faster and Better AI Assistant扩展插件，让它帮你看一看出了什么问题
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
