lulei5153的博客

原创 HTML5动态时间显示组件

这篇文章展示了如何用HTML、CSS和JavaScript创建一个现代风格的动态时间显示组件。代码实现了一个响应式的时间展示界面，包含年份、月份、日期、星期以及精确到秒的时间显示。该组件采用圆角设计，运用了多重阴影、渐变色和特殊剪裁效果，视觉效果突出。JavaScript部分每秒更新一次时间显示，确保实时性。整体设计紧凑(310px宽度)，适合嵌入式使用，具有时钟、日历和星期显示的综合功能。

原创 彩色的圆球形符号[特殊字符][特殊字符][特殊字符][特殊字符][特殊字符]

摘要：本文介绍了几种彩色的圆球形符号，包括红色（🔴）、黄色（🟡）、绿色（🟢）、蓝色（🔵）和紫色（🟣）。通过HTML代码展示了这些色彩鲜明的圆形符号，可用于网页设计和视觉呈现。

原创 模拟热血三国内城安置建筑物

摘要：本文展示了一个三国题材游戏内城建筑的HTML布局设计，包含可拖拽的建筑模块（如民房、军营、仓库等）和网格化的内城布局。通过JavaScript实现拖放功能，玩家可以自由布局各类功能性建筑（铁匠铺、校场、驿站等）。代码采用flex和grid布局，配合不同颜色区分建筑类型，为游戏提供了直观的城市建设界面。

原创 热血三国建筑攻略表格

《热血三国》建筑布局攻略提供了三种城池类型的最佳配置方案：主城（1仓库8兵营12民房）、粮城（10仓库1兵营10民房）和兵城（1仓库10兵营10民房）。表格详细列出各建筑在不同城池的推荐等级，如官府、书院等核心建筑需升至10级，客栈、市场等功能性建筑建议9级。页面还包含可视化布局图，展示民房、兵营等建筑的合理排布。该攻略强调资源分配与军事平衡，为玩家提供系统化的城建指导。

原创 热血三国野地名将列表

这篇HTML文档展示了一个"野地名将信息表"，包含35位武将的四维属性数据（统帅、内政、勇武、智谋）。表格采用响应式设计，支持点击表头对各属性列进行升降序排序。其中孟获、祝融夫人等武将的勇武值超过100，而蔡琰则在智谋和内政方面表现突出。文档还包含JavaScript排序函数实现交互功能，整体呈现了一个可交互的武将能力值对比表格。

原创 简单的有声倒计时功能实现

摘要：本文实现了一个有声倒计时功能网页，允许用户添加带提示音的自定义倒计时。通过表单输入提示信息和目标时间后，系统会动态生成倒计时项，并实时显示剩余天数、小时、分钟和秒数。到期时自动播放提示音，并标记为红色。提供编辑、删除和停止提示音功能，采用JavaScript定时器实现倒计时逻辑，并使用Audio对象播放"Alone.mp3"作为提示音。该功能适用于各种需要定时提醒的场景。

原创 HTML、CSS、JS 代码运行器

【代码】HTML、CSS、JS 代码运行器。

原创 房租水电记录

【代码】房租水电记录。

原创 漂亮的手机号文字

【代码】漂亮的手机号文字。

原创 自动获取屏幕尺寸信息的html文件

我们创建了一个占满整个视口（viewport）的div，背景颜色设置为浅蓝色，字体大小设置为2em，内容居中对齐。然后，我们使用JavaScript来获取这个div的实际宽度和高度，并实时显示在div中。当页面加载或窗口大小改变时，尺寸信息会自动更新。

原创 绘制三角形、正六边形、五角星、六角星

【代码】绘制三角形、正六边形、五角星、六角星。

原创 文本在屏幕上自由游动

【代码】文本在屏幕上自由游动。

原创 用户角色管理:优化函数

【代码】用户角色管理:优化函数。

原创 手机留言板

【代码】手机留言板。

原创 手机备忘录：房租记录，倒计时记录，账号记录

【代码】手机备忘录：房租记录，倒计时记录，账号记录。

原创 手机版登录界面！滑动切换效果：减去120多行代码

【代码】手机版登录界面！滑动切换效果：减去120多行代码。

原创 手机版简单的密码记录本：内置的记录在页面隐藏了删除按钮，页面上添加的显示删除按钮

手机版简单的密码记录本：内置的记录在页面隐藏了删除按钮，页面上添加的显示删除按钮。

原创 重新修改我的标志

【代码】重新修改我的标志。

原创 上下分色文字

【代码】上下分色文字。

原创 简单的音乐播放器

【代码】简单的音乐播放器。

原创 倒计时功能实现：认识了css选择器 div[id^=“countdown-“]

【代码】倒计时功能实现：认识了css选择器 div[id^=“countdown-“]

原创 自建html首页

【代码】自建html首页。

原创 组装首页:其他组件html、css移入JS中再引入首页

【代码】组装首页:其他组件html、css移入JS中再引入首页。

原创 html导航栏页面切换效果减少代码量

【代码】html导航栏页面切换效果减少代码量。

原创 绝美登录界面手机版！滑动切换效果

手机版上下滑动切换效果，退出登录回到登录界面

原创 房租水电费记录本：添加了账号密码登录才能查看

【代码】房租水电费记录本：添加了账号密码登录才能查看。

原创 绝美的登录界面！滑动切换效果：遮盖层背景颜色改成背景图片

简单地封装实现注册和登录功能，遮盖层背景颜色改成背景图片

原创 房屋水电费记账本：内置的数组数据击按钮不能删除，页面手动添加的可以删除

【代码】房屋水电费记账本：内置的数组数据击按钮不能删除，页面手动添加的可以点。

原创 房屋水电费：重新布局

【代码】房屋水电费：重新布局。

原创 房屋水电费：重新布局，重构JS代码

【代码】房屋水电费：重新布局，重构JS代码。

原创 好玩的水表电表

【代码】好玩的水表电表。

原创 好玩的进3D度条

【代码】好玩的进3D度条。

原创 2024年房租水电费记账本：重新布局，给它一点意思看看，打包到手机可以用

【代码】2024年房租水电费记账本：重新布局，给它一点意思看看，打包到手机可以用。

原创 房租水电费记账本：重构JS代码，添加制成图片按钮

修复 calculateDetails 函数中的首月用水量和用电量的计算错误：这个修复版本中，当 index == 0 时（即处理的为首月记录），用水量和用电量的计算是针对当前记录的值减去自身，因此保证了在首月不出现负值的情况。同时，只有当不是首月的时候，才进行和前一个月的读数比较。这样能确保首月的计算过程能够正确反映出实际情况。

原创 2024年房租水电费卡片记账本：改成卡片布局在手机上好用，添加了localStorage保存数据

原创 input文本框随其中内容而变化长

【代码】input文本框随其中内容而变化长。

原创 房租水电费记账本(内置数组数据版)：只显示有记录的月份，简单添加了手机模式下的样式

【代码】房租水电费记账本(内置数组数据版)：只显示有记录的月份，简单添加了手机模式下的样式。

原创 很有意思的css动态渐变

【代码】很有意思的css动态渐变。

原创 我的标志：奇特的头像

【代码】我的标志：奇特的头像。

原创 staticHeader(静态标头)：精减代码，添加个倒计时

【代码】staticHeader(静态标头)：精减代码，添加个倒计时。