第25次修改留言板，修改了布局，样式和脚本分离

2024-05-16 08:36
文章标签 分离 布局 25 脚本 修改 样式 留言板

本文主要是介绍第25次修改留言板，修改了布局，样式和脚本分离，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

伤心城市

 首页

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="beiwanglu" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\index.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_logo.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_menu.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_time.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_right.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_content.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\input_checkbox.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_left.css"><title>与妖为邻备忘录</title>
</head>
<body><div id="div" style="width:100vw;height:100vh;"><div id="div_top" style="width:100vw;height:8vh;"><div id="div_top_logo" style="width:8vw;height:8vh;float:left"><div><img src="file:///D:\My homepage\beiwanglu\img\kong.jpg" alt="与妖为邻"><h2 class="my_name">与妖为邻</h2><h2 class="memo">备忘录</h2></div></div><div id="div_top_menu" style="width:41.9vw;height:8vh;float:left"><li class="active"><a href="#home">首页</a></li><li class="li"><a href="D:\My homepage\beiwanglu\html\网站.html">网站</a></li><li class="li"><a href="D:\My homepage\beiwanglu\html\学习.html">学习</a></li><li class="li"><a href="D:\My homepage\beiwanglu\html\关于.html">关于</a></li></div><div id="div_top_time" style="width:42vw;height:8vh;float:left"><div id="current_time">当前时间</div></div><div id="div_top_right" style="width:8vw;height:8vh;float:right"><span class="update_summary">第25次（0.5.0）更新</span><div class="css_summary_collapse"><div class="update_notes"><p>第25次（0.5.0）更新：重新布局，样式和脚本分开</p></div></div></div></div><div id="div_left" style="width:8vw;height:89.5vh;float:left;"><div><input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"class="background3D" /><button id="delete">对选择进行删除</button></div></div><div id="div_content" style="width:84vw;float:left;"><sub style="background-color:#67C23A;color:#FFFFFF;">首页页面 <form id="myForm"><textarea class="up-textarea" name="uptextarea" placeholder="选择本地txt、js、css或html文件，文件内容会被自动读取"></textarea><button type="text" class="abb-text">添加</button><input type="reset" value="重置"></form></sub><div class="memo_content_area" id="memo"></div></div><div id="div_right" style="color:#FFFFFF;width:8vw;height:89vh;float:right;">首页页面</div><div id="div_both"style="background-color:#a93712;color:#FFFFFF;width:100vw;height:2vh;clear:both;text-align:center;">作者：与妖为邻</div></div>
</body>
<script type="text/javascript" src="file:///D:\My homepage\beiwanglu\stores\time.js"></script>
<script type="text/javascript" src="file:///D:\My homepage\beiwanglu\stores\div_content_todotext.js"></script>
</html>

样式index.css

* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;text-shadow: 1px 1px 1px #000;input,button {/* 鼠标变成手型 */cursor: pointer;&:hover {background-color: #bb0404;color: #eb0707;}&: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);}}
}
body {min-height: 100vh;background-color: #144756;background-size: cover;
}
#div_top {border: 1px solid rgba(0, 213, 255, 0.4);
}
#div_content {padding: 20px;border-radius: 10px;border: 0px solid black;box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,inset 0 4px 2px -2px #2c3e50, inset 0 0 2px 8px #4c4343,inset 0 0 20px 10px #000000;
}

样式div_top_logo.css

#div_top_logo div{position: fixed;top: 2px;left: 2px;width: 140px;height: 66px;border-radius: 50%;/* 图片 img*/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%;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);border: 0px solid black;}.my_name {letter-spacing: -8px;}
}

 

 样式div_top_menu.css

#div_top_menu {li {/* 转为内联块级元素 */display: inline-block;width: 90px;height: 45px;/* 文本居中 */text-align: center;transform: translate(70px, 25px);margin: 0px 15px;/* 鼠标悬停时显示小手 *//* 鼠标变小手 */cursor: pointer;border-radius: 10px;font-size: 2rem;border: 0px;}a {/* 文字大小 */font-size: 2rem;/* 去掉下划线 */text-decoration: none;&:hover {color: #ffc97e;}}
}
.li {a {color: hsla(160, 100%, 37%, 1);}box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),inset -4px -4px 5px rgba(0, 0, 0, 0.6);background-image: radial-gradient(transparent 30%, #aa0502a2 70%);background-size: 5px 5px;border-radius: 5px;
}
.active.active {box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.589),inset 2px 2px 3px rgba(0, 0, 0, 0.6);z-index: 10;background-image: radial-gradient(transparent 30%,rgba(101, 0, 0, 0.941) 70%);background-size: 5px 5px;border-radius: 5px;a {color: #e63c3c;transform: translate(13px, 25px);border-radius: 10px;content: "";animation: flicker 0.2s infinite 0.3s;background-image: radial-gradient(#ffdd00fd,#ff0000d6 40%,transparent 70%);}
}
@keyframes flicker {0% {opacity: 1;}80% {opacity: 0.8;}100% {opacity: 1;}
}

 样式div_top_right.css

.update_summary {font-size: 20px;font-weight: 700;position: relative;cursor: pointer;color: #f40b0b;
}
.update_summary:hover+.css_summary_collapse {grid-template-rows: 1fr;
}
.css_summary_collapse {display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);div {background-color: #829900;overflow: hidden;width: 120px;position: relative;z-index: 9999;p {position: relative;color: #ffffff;margin: 0 auto;}}
}

样式div_content.css

sub {position: fixed;display: flex;transform: translate(0px, -25px);border-radius: 50px;margin: 0px 50px;#myForm {display: flex; margin-left: 20px;textarea {height: 20px;z-index: 10;width: 400px;color: #ffffff;text-shadow: 1px 1px 1px #000;background-color: #2c3e50;&::placeholder {color: rgb(234, 255, 0);}}button,input{background-color: #67C23A;color: #ffffff;padding: 0px 10px;}input{border-radius: 0  50px  50px 0;}}
}
span {word-wrap: break-word;-webkit-user-select: text;-ms-user-select: text;user-select: text;color: #8ac5ff93;/* color: hsla(160, 100%, 37%, 0.5); */font-size: 20px;&: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;border-radius: 20px;}
}
.finish {border-radius: 50px;/* 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;
}

 脚本：div_content_todotext.js

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) {localStorage.todotext = JSON.stringify(arr);
}
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><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;};};
};

脚本： time.js

 

var current_time = document.getElementById("current_time");
function showTime(time) {var now = new Date();var year = now.getFullYear();var month = now.getMonth();var day = now.getDate();var hour = now.getHours();var minu = now.getMinutes();var second = now.getSeconds();month = month + 1;var arr_work = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");var week = arr_work[now.getDay()];month = month < 10 ? "0" + month : month;//时间月份个位补0day = day < 10 ? "0" + day : day;hour = hour < 10 ? "0" + hour : hour;minu = minu < 10 ? "0" + minu : minu;second = second < 10 ? "0" + second : second;var time = year + "年" + month + "月" + day + "日 " + week + " " + hour + ":" + minu + ":" + second;current_time.innerHTML = time;
}
window.setInterval("showTime(current_time)", 1000);

学习页面：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="beiwanglu" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\index.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_logo.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_menu.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_time.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_right.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_content.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\On_Off_button.css"><link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_left.css"><title>与妖为邻备忘录</title>
</head><body><div id="div" style="width:100vw;height:100vh;"><div id="div_top" style="width:100vw;height:8vh;"><div id="div_top_logo" style="width:8vw;height:8vh;float:left"><div><img src="file:///D:\My homepage\beiwanglu\img\kong.jpg" alt="与妖为邻"><h2 class="my_name">与妖为邻</h2><h2 class="memo">备忘录</h2></div></div><div id="div_top_menu" style="width:41.9vw;height:8vh;float:left"><li class="li"><a href="C:\Users\90917\Desktop\备忘录.html">首页</a></li><li class="li"><a href="D:\My homepage\beiwanglu\html\网站.html">网站</a></li><li class="active"><a href="#学习">学习</a></li><li class="li"><a href="D:\My homepage\beiwanglu\html\关于.html">关于</a></li></div><div id="div_top_time" style="width:42vw;height:8vh;float:left"><div id="current_time">当前时间</div></div><div id="div_top_right" style="width:8vw;height:8vh;float:right"><span class="update_summary">第25次（0.5.0）更新</span><div class="css_summary_collapse"><div class="update_notes"><p>第25次（0.5.0）更新：重新布局，样式和脚本分开</p></div></div></div></div><div id="div_left" style="width:8vw;height:89.5vh;float:left;"><div></div></div><div id="div_content" style="width:84vw;float:left;"><sub style="background-color:#67C23A;color:#FFFFFF;">学习页面 </sub>
<!-- 开关按钮 start-->
<div class="container"><label class="switch"><input type="checkbox" checked="checked"><div class="button"><div class="light"></div><div class="dots"></div><div class="characters"></div><div class="shine"></div><div class="shadow"></div></div></label>
</div>
<!-- 开关按钮 end--></div><div id="div_right" style="color:#FFFFFF;width:8vw;height:89vh;float:right;">学习页面</div><div id="div_both"style="background-color:#a93712;color:#FFFFFF;width:100vw;height:2vh;clear:both;text-align:center;">作者：与妖为邻</div></div>
</body><script type="text/javascript" src="file:///D:\My homepage\beiwanglu\stores\time.js"></script></html>

样式On_Off_button.css

.switch {transform: translate(150%, 0%);display: block;background-color: black;width: 150px;height: 195px;box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2),0 0 1px 2px black,inset 0 2px 2px -2px white,inset 0 0 2px 15px #47434c,inset 0 0 2px 22px black;border-radius: 5px;padding: 20px;perspective: 700px;
}.switch input {display: none;
}.switch input:checked+.button {transform: translateZ(20px) rotateX(25deg);box-shadow: 0 -10px 20px #ff1818;
}.switch input:checked+.button .light {animation: flicker 0.2s infinite 0.3s;
}.switch input:checked+.button .shine {opacity: 1;
}.switch input:checked+.button .shadow {opacity: 0;
}.switch .button {display: block;transition: all 0.3s cubic-bezier(1, 0, 1, 1);transform-origin: center center -20px;transform: translateZ(20px) rotateX(-25deg);transform-style: preserve-3d;/* background-color: #9b0621; */height: 100%;position: relative;cursor: pointer;background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);background-repeat: no-repeat;
}.switch .button::before {content: "";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;background-repeat: no-repeat;width: 100%;height: 50px;transform-origin: top;transform: rotateX(-90deg);position: absolute;top: 0;
}.switch .button::after {content: "";background-image: linear-gradient(#650000, #320000);width: 100%;height: 50px;transform-origin: top;transform: translateY(50px) rotateX(-90deg);position: absolute;bottom: 0;box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}.switch .light {opacity: 0;animation: light-off 1s;position: absolute;width: 100%;height: 100%;background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}.switch .dots {position: absolute;width: 100%;height: 100%;background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);background-size: 10px 10px;
}.switch .characters {position: absolute;width: 100%;height: 100%;background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;background-repeat: no-repeat;
}.switch .shine {transition: all 0.3s cubic-bezier(1, 0, 1, 1);opacity: 0.3;position: absolute;width: 100%;height: 100%;background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;background-repeat: no-repeat;
}.switch .shadow {transition: all 0.3s cubic-bezier(1, 0, 1, 1);opacity: 1;position: absolute;width: 100%;height: 100%;background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));background-repeat: no-repeat;
}@keyframes flicker {0% {opacity: 1;}80% {opacity: 0.8;}100% {opacity: 1;}
}@keyframes light-off {0% {opacity: 1;}80% {opacity: 0;}
} 
/* .container{transform: rotateZ(-90deg); 
} */

 

 

这篇关于第25次修改留言板，修改了布局，样式和脚本分离的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/994402。

相关文章

springboot将lib和jar分离的操作方法

springboot将lib和jar分离的操作方法

《springboot将lib和jar分离的操作方法》本文介绍了如何通过优化pom.xml配置来减小SpringBoot项目的jar包大小,主要通过使用spring-boot-maven-plugin... 遇到一个问题，就是每次maven package或者maven install后target中的ja
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
配置springboot项目动静分离打包分离lib方式

配置springboot项目动静分离打包分离lib方式

《配置springboot项目动静分离打包分离lib方式》本文介绍了如何将SpringBoot工程中的静态资源和配置文件分离出来,以减少jar包大小,方便修改配置文件,通过在jar包同级目录创建co... 目录前言1、分离配置文件原理2、pom文件配置3、使用package命令打包4、总结前言默认情况下，
阅读更多...
修改若依框架Token的过期时间问题

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
MySQL修改密码的四种实现方式

MySQL修改密码的四种实现方式

《MySQL修改密码的四种实现方式》文章主要介绍了如何使用命令行工具修改MySQL密码,包括使用`setpassword`命令和`mysqladmin`命令,此外,还详细描述了忘记密码时的处理方法,包... 目录mysql修改密码四种方式一、set password命令二、使用mysqladmin三、修改u
阅读更多...
使用Python在Excel中插入、修改、提取和删除超链接

使用Python在Excel中插入、修改、提取和删除超链接

《使用Python在Excel中插入、修改、提取和删除超链接》超链接是Excel中的常用功能,通过点击超链接可以快速跳转到外部网站、本地文件或工作表中的特定单元格,有效提升数据访问的效率和用户体验,这... 目录引言使用工具python在Excel中插入超链接Python修改Excel中的超链接Python
阅读更多...
10个Python自动化办公的脚本分享

10个Python自动化办公的脚本分享

《10个Python自动化办公的脚本分享》在日常办公中,我们常常会被繁琐、重复的任务占据大量时间,本文为大家分享了10个实用的Python自动化办公案例及源码,希望对大家有所帮助... 目录1. 批量处理 Excel 文件2. 自动发送邮件3. 批量重命名文件4. 数据清洗5. 生成 PPT6. 自动化测试
阅读更多...
使用Java实现一个解析CURL脚本小工具

使用Java实现一个解析CURL脚本小工具

《使用Java实现一个解析CURL脚本小工具》文章介绍了如何使用Java实现一个解析CURL脚本的工具,该工具可以将CURL脚本中的Header解析为KVMap结构,获取URL路径、请求类型,解析UR... 目录使用示例实现原理具体实现CurlParserUtilCurlEntityICurlHandler
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2