Bootstrap框架实现简易的模态框 目录： 一、模态框的简单介绍 二、代码实现 1.HTML代码 2.CSS代码 一、模态框的简单介绍 点击按钮以查看实现效果： 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独来源的内容，使用户可以在不离开父窗体的情况下有一些互动，比如提供信息、交互等。 简单来说，模态框是一个div，包含“modal-header”（模态框头部）、“modal-body”（模态框主体）、“modal-footer”（模态框底部）三个子元素。 简单结构大概是这样： 二、代码实现 导入jQuery和Bootstrap： <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"> </script><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 1.HTML代码 <h2>Bootstrap框架实现简易的模态框</h2> <!-- 触发模态框的按钮 data-target的值是要加载的模态框 --> <button class="click btn btn-primary" data-toggle="modal" data-target="#showModal">点击显示模态框</button> <!-- modal属性用于把div识别为模态框窗口，fade是可以设置模态框淡入淡出 aria-labelledby的值是模态框的标题 aria-hidden="true"用于保持模态窗口不可见，直到触发器（比如按钮）被触发为止--> <div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="titleModal" aria-hidden="true"> <!-- modal-dialog 设置弹出层 弹出效果--> <div class="modal-dialog"> <!-- 模态框的底层 --> <div class="modal-content"> <!-- 模态框头部--> <div class="modal-header"> <!-- 关闭按钮 data-dismiss="modal"用来关闭窗口 --> <button class="close" data-dismiss="modal" aria-hidden="true"> <!-- &times 转义成“x”关闭符号 --> &times; </button> <!-- 模态框标题 --> <h4 class="modal-title" id="titleModal">Roookie博客 | 记录 · 收纳 · 分享</h4> </div> <!-- 模态框主体 --> <div class="modal-body"> <br><a href="https://www.langp.wang"> <img src="https://gitee.com/wang-langping/langp/raw/master/icon/1.png" alt="网络连接失败，请检查网络连接"> </a> </div> <!-- 模态框底部 --> <div class="modal-footer"> <!-- 模态框底部的操作按钮 --> <button class="btn btn-info" data-dismiss="modal">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> 2.CSS代码 h2,h4,.modal-body{ text-align:center; } .click{ display:block; padding:10px; margin:30px auto; } 更多内容： Bootstrap 模态框（Modal）插件 | 菜鸟教程 (runoob.com)

用jQuery实现元素被点击选中的效果 目录： 一、说明 二、代码实现 1.HTML代码 2.CSS代码 3.JS代码 一、说明 页面中存在四个div元素，实现以下效果： 当鼠标放置在div元素上面的时候，元素呈现平滑放大效果； 鼠标点击任意一个元素，元素变大，周围出现阴影，表现出被选中的效果 演示效果如下，鼠标点击即可选中或者用按钮进行多选： 二、代码实现 提前导入jQuery文件： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 1.HTML代码 <h2>用jQuery实现元素被点击选中的效果</h2> <div class="box"> <div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div> <button id="all-selected">全选/取消全选</button> </div> 2.CSS代码 <style> h2 { text-align: center; } .box{ display:flex; border:1px solid #aaabad; width:700px; margin:auto; } /*给盒子设置样式*/ .box>div { border: 3px solid dodgerblue; margin: 30px auto; padding: 15px; border-radius: 10px; /* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */ transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -moz-transition: all 0.5s; } /*为盒子添加伪类，实现鼠标放到元素上的效果*/ .box>div:hover { /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } /* 元素被选中时的效果 */ .selected { box-shadow: 0 0 15px deepskyblue; /* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */ transform: scale(1.2, 1.2); } #all-selected { width:100px; height:35px; border-radius:5px; display:inline-block; margin: 40px 25px 25px; transition:all 0.5s; } #all-selected:hover{ background-color:#c9c9c9; } </style> 3.JS代码 <script> // 设置一个变量symbol，来判断当前的状态是否为选中 let symbol = true; $(document).ready(function () { // 为box盒子添加点击事件 $(".box>div").click(function () { if (symbol === true) { // 当symbol的值为true时，为点击的元素添加"selected"属性 $(this).addClass("selected"); // 同时symbol的值取反 symbol = false; } else { // 当symbol的值为false时，移除"selected"属性 $(this).removeClass("selected"); // symbol的值取反 symbol = true; } }); // 为“全选”按钮添加全选事件 $("#all-selected").click(function () { if (symbol === true) { $(".box>div").addClass("selected"); symbol = false; } else { $(".box>div").removeClass("selected"); symbol = true; } }); }); </script>

IDEA添加并配置Tomcat服务器 目录： 一、提前准备 二、创建Java web项目 三、添加Tomcat服务器 四、启动Tomcat服务器 五、其他操作 更改Tomcat默认端口 环境说明： 系统：Win10专业版 JDK版本：1.8 Tomcat版本：8.5.57 开发环境：IDEA 2020.03 Ultimate 一、提前准备 首先，访问Tomcat官网，选择一个版本的Tomcat进行下载，下载完之后解压。本篇博客以Tomcat8.5为例，下载的是windows 64位。下载完之后解压，记住解压完的文件位置，后面导入服务器时要用到。 其次，要保证当前的计算机正确配置了Java环境，win10系统下Java环境的配置请参考：Win10系统配置Java开发环境 二、创建Java web项目 注意：IDEA的Community版本是无法进行Web开发的，Web开发需要Ultimate版本 打开IDEA，先创建一个Java项目。然后在项目名上依次点击右键->”Add Framework Support“，弹出的窗口中勾选“Web Application”选项，点击右下角“OK”即可。 这样创建出来的就是Java web项目了，原来的项目目录会多出来一个“web”文件夹： 三、添加Tomcat服务器 依次点击“File”->“setting”（或者快捷键Ctrl+Alt+s）打开设置界面，然后选择“Build，Execution，Deployment”->“Application Servers”，点击“+”新添加一个应用服务器： 选择的服务器类型为“Tomcat Server”，注意不要选成“TomEE Server”： 在弹出的窗口中选择本地Tomcat的所在目录，IDEA会自动识别出Tomcat的版本，两连“OK”退出 回到主界面，找到菜单栏右边的“Add Configuration”： 点击左上角“+”，在展开的列表中依次选择“Tomcat Server”->“Local”，新建一个本地服务配置。因为前面添加了Tomcat服务器，所以右侧窗口中出现的配置项已自动填好，有需要的可以根据下图说明来改变部分选项： 然后我们需要把之前新建的这个项目放到Tomcat服务器上运行。切换到选项卡“Deployment”，点击左下角“+”，选择“Artifact”，当前项目就被添加上去了，添加完点击“OK”退出。 四、启动Tomcat服务器 如果前面配置没问题的话，现在左下角会出现“Services”窗口选项，在服务器名称上右键->“Run”，Tomcat服务器就启动了。 等待几秒钟服务器完全启动之后，会自动在浏览器中打开项目，如果没有自动打开那就用“localhost:8080”在浏览器中访问项目。 当前由于我们运行的只是空项目，没有对项目做任何更改，所以项目的运行结果会是下面这样： 到这里就配置成功了。 五、其他操作 更改Tomcat默认端口 在主界面找到菜单栏右边的“Tomcat ”，选择“Edit Configurations”： “HTTP port”是默认端口，更改完之后要重启Tomcat服务器才能生效 暂时这些，其他的碰到再添加。

Win10系统配置Java开发环境 目录： 两句废话 一、安装JDK 二、配置环境变量 三、验证环境是否搭建成功 环境说明： 系统：Win10专业版 Java版本：1.8 两句废话 最近收到了升级Win10 20H2版本的更新消息（别问我为什么2021年才收到2020年的更新包，问就是不知道），之前也听说这是修复Bug的一次更新。所以出于对微软的信任，原来的旧系统我并没有备份，就直接升级了系统，系统升级过程还算顺利。但是，我还是太”轻敌“了，新系统用了几天之后，原来的Bug修没修复还真没感觉出来，能感觉出来的反倒是是几个新的Bug：Win+V打不开剪贴板，运行窗口用notepad打不开记事本，快捷键Shift+Win+S无法打开windows自带的截图功能，这几项Bug暂且还能接受，因为有其他第三方软件能够代替这几个功能。最让我难受的一个Bug就是全屏开始菜单里的图标全成了光秃秃的小方块，没有应用名字，也没有图案logo，每次打开开始菜单都得回忆一下要找的应用的位置，非常麻烦，网上提供的方法也基本上都是治标不治本，用了一周多实在是忍受不了这些Bug，于是忍痛重装了系统。 所以话说回来，更新Win10之前一定要把原来的系统备份一遍！！！！这次经历可真是太长记性了。 重装完系统的确清爽多了，但是写Java时，才想起来新系统的Java环境还没配置，所以把配置Java环境的过程记录下来，方便以后查询（以后谁要让我帮他配Java环境，我就把这篇博客链接扔过去）。 嗯，废话讲完了。 附上Oracle官方文档中安装Java环境的相关链接：JDK Installation for Microsoft Windows (oracle.com) 一、安装JDK 首先下载JDK安装包。 Java 官网：Oracle 甲骨文中国 | 集成的云应用和平台服务 JDK 最新版本下载：Java Downloads | Oracle 旧版本 JDK 下载：Java Archive | Oracle 选择一个Java版本之后，选择“Windows x64”版本进行下载。 由于下载 JDK 旧版本需要登录 Oracle 帐号，随便用临时邮箱注册了一个账号，用这个就行： 帐号：linshi@linshiyouxiang.net 密码：Youxiang123@ 本篇博客以JDK 8（也称为JDK 1.8）作为示例来说明。 下载好之后打开安装，安装的是JDK和JRE两部分。安装时直接一路点击“下一步”，安装注意一下安装位置，后面要用。 二、配置环境变量 “计算机”图标上点击右键->属性->高级系统设置（win10 20H2需要在属性窗口的后面才能找到高级系统设置），在高级系统设置窗口的右下角点击“环境变量”。 “环境变量”分为两部分，一个是“用户变量”，这里面配置的环境变量只适用于当前计算机用户，另一个是“系统变量”，设置的环境变量适用于这台计算机上的所有用户。具体设置成哪种环境变量看个人习惯。 添加如下两条环境变量： 环境变量名称 环境变量值 JAVA_HOME C:\Program Files\Java\jdk1.8.0_221 Path %JAVA_HOME%\bin JAVA_HOME的值是JDK的安装路径，如果在上一步安装的时候没有更改安装路径的话，则JDK的默认安装路径为：“C:\Program Files\Java\jdk1.8.0_221 ”，因为版本号的问题，JDK的安装文件夹名称可能会有些许差别，请根据实际情况写。 其实第一个环境变量的名称并不是固定的，在其他的配置Java环境变量的教程中名称也可能不同。这个只是习惯而已，只要保证环境变量值没什么问题即可。 这两条添加完之后，两连“确定”完成配置。 三、验证环境是否搭建成功 使用快捷键Win+R打开运行窗口，输入“cmd”，然后回车打开命令行界面，使用如下命令查看当前系统的Java版本： java -version 结果如下： 结果正确显示出Java的版本信息时，说明Java环境配置成功。

免费的网站运行状态监控工具——UptimeRobot 目录： 前言 一、将网站添加到监控列表 二、获取监控网站的api 三、修改项目文件 前言 这是我利用UptimeRobot搭建的网站状态监控站：https://status.wlplove.com UptimeRobot是国外的一个网站监控服务，添加网站到监控列表之后，可以24小时监控网站的运行状态，当网站无法访问时会立即通知用户。该服务提供了免费和付费两个版本，免费版的服务是5分钟检测一次，这个频率对于我的个人网站来说已经足够，所以就不考虑付费了（白嫖怪嘤嘤嘤）。 设置了监控服务之后，在UptimeRobot网站可以查看网站的监控状态，但是配置起来还挺麻烦的，访问速度也不快。因此不使用这种方式，而是基于官方提供的API，在本地搭建一个页面来显示网站的运行状态。 要用到的是github上一个基于UptimeRobot API的项目。 这是项目的github地址：https://github.com/yb/uptime-status 将这个项目clone拉取到本地。 一、将网站添加到监控列表 进入UptimeRobot官网，使用邮箱注册一个账号 之后登陆，点击“Go to Dashboard”，进入监控仪表盘 点击左上角“Add New Monitor”。按照如下设置给自己的网站添加监控： 二、获取监控网站的api 在仪表盘界面点击“My Setting”： 往下找到“Read-only API Key”选项，点击最后一行的“Create the read-only API key”，创建一个API key，然后复制下这个API，后面会用到这个API key。 三、修改项目文件 打开刚才从github上拉取下来的项目文件夹，我们要修改其中的“config.js”这个文件，只需要修改“SiteName”、“SiteUrl”、“ApiKeys”这三项，，前两项就是网站名和网站链接，第三项改成上一步复制的Api Keys，最后还有一个项是“Navi”，是指页面右上角的导航栏菜单项，改不改都行，不影响前面的显示。这个具体的修改细则作者已经在注释中说的很详细了。 整个修改完之后别忘了保存，然后打开 “index.html”，就能看到网站的运行状态了，大概是这样： 接下来把整个项目文件扔到网站的目录下，就算是大功告成了。