修改留言板
备忘录
/* 设置全局样式 */
* {
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);
}
}
}
/* 时间 */
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;
} */
/* 全屏还原关闭按钮 */
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;
color: #E6A23C;
text-align: center;
td {
height: 24px;
}
.displayBtn {
background: #0bb811c9;
text-shadow: 1px 1px 1px rgb(0, 0, 0);
width: 30vw;
cursor: pointer;
font-weight: bold;
&:hover {
background-color: #f3d303;
color: #ff0505;
}
}
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 {
color: azure;
box-shadow: 0 0 1px rgba(255, 254, 254, 0.5);
display: flex;
justify-content: space-between;
padding: 5px;
cursor: move;
button {
background: #ff000004;
border: none;
font-size: 30px;
/* 放大镜效果 */
transform: scale(1.6);
margin: 0 5px;
&:hover {
background-color: #f30303;
width: 30px;
height: 28px;
border-top-right-radius: 5px;
}
}
}
.textarea-form {
input[type="file"] {
box-shadow: 0 0 2px rgba(253, 3, 3, 0.991);
margin: 5px;
}
sub {
color: #ffffff;
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;
}
}
}
}
}
/* 隐藏的输入框 结束 */
/* 留言列表 */
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);
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;
text-align: center;
&: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;
}
}
.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样式 结束 */
与妖为邻
与妖为邻
2024-07-10
首页
首页
英语
英语
音乐
音乐
项目
项目
| 编辑首页页面按钮 | 首页杂记 | 删除首页页面按钮 |
这是一个弹窗留言输入框× 添加 |
| 编辑英语页面按钮 | 英语杂记 | 删除英语页面按钮 |
这是一个弹窗留言输入框× 添加 |
| 编辑音乐页面按钮 | 音乐杂记 | 删除音乐页面按钮 |
这是一个弹窗留言输入框× 添加 |
| 编辑项目页面按钮 | 项目杂记 | 删除项目页面按钮 |
这是一个弹窗留言输入框× <a href=" " target="_blank"></a> < > ^\s*(?=\r?$)\n 添加 |
网站收藏
收藏列表 本地列表 作者：与妖为邻 function formatDate(date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; const dayOfWeek = days[date.getDay()]; return `${year}-${month}-${day} ${dayOfWeek} ${hours}:${minutes}:${seconds}`; } document.write(formatDate(new Date)); /* 现在时间*/ 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}${week} ${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(".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 () { const checkedBoxes = memo.querySelectorAll("input[name='checkbox']:checked"); if (checkedBoxes.length === 0) { alert("没有选择任何项目"); } else { if (confirm("是否删除所选？")) { checkedBoxes.forEach((checkbox) => { checkbox.parentElement.remove(); }); saveTodo(); } } }); function insertHtml(target, val, cls) { target.insertAdjacentHTML( "beforeend", ` ${val} ` ); } // 在页面加载时调用持久化存储的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" }, ]; 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个拖动按钮的实现结束*/
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。
