为了做这个便签墙的后台，我花了一个小时，终于弄好了！内容的话，我晚些再补吧，因为我今天还有其他事没忙完，没办法，明天再更！
发现一个不错的网站，这个网站作者是：https://github.com/uninto/notes，纯html、css、js实现。有人说这个类似之前的许愿墙，我觉得也可以把这个元素加进去，毕竟我群里很多宅男腐女，最喜欢这个玩意儿了，晚些我直接上线到我的工具箱里因为这个只有一个前端页面，代码如下，我就准备做个后端出来，到时候重新开个帖子，供大家使用。 便签墙
一个花里胡哨的确认按钮（可复制源代码）
真的很不错！ 一个花里胡哨的确认按钮 <polyline points="1 10 4 7 4 5 6 1" /><path d="M4,13 C5.33333333,9 7,7 9,7 C11,7 12.3340042,6 13.0020125,4" /><path d="M6,15 C7.83362334,13.6666667 9.83362334,12.6666667 12,12 C14.1663767,11.3333333 15.8330433,9.66666667 17,7" /> Confirm
用豆包生成了一个财务报表的页面，觉得比较好看，大家可以参考学些下： 财务报表分析 财务报表分析系统 仪表盘 收支记录 预算管理 财务分析 JD 贾东 财务报表分析 全部账户 招商银行(6288) 工商银行(8866) 支付宝 微信支付 导出报表 收支趋势 支出分类 收入来源 资产负债 近7天 近30天 近90天 总收入 ¥28,642.50 12.5% 较上月增长 ¥3,125.75 总支出 ¥19,285.30 8.2% 较上月增长 ¥1,476.23 净收入 ¥9,357.20 18.3% 较上月增长 ¥1,649.52 结余率 32.7% 3.2% 较上月增长 3.2 个百分点 收支趋势 日 周 月 支出分类统计 全部类别 餐饮美食 购物消费 交通出行 住房缴费 休闲娱乐 医疗健康 其他支出 餐饮美食 ¥4,285.75 22.2% 购物消费 ¥3,842.30 19.9% 交通出行 ¥2,756.80 14.3% 住房缴费 ¥5,680.20 29.4% 其他支出 ¥2,720.25 14.1% 最近交易记录 日期 描述 类别 账户 金额 2025-07-25 星巴克咖啡 餐饮美食 支付宝 -¥38.50 2025-07-25 京东购物 购物消费 招商银行(6288) -¥285.90 2025-07-24 工资入账 工资收入 工商银行(8866) +¥12,500.00 2025-07-24 地铁通勤 交通出行 微信支付 -¥8.00 2025-07-23 超市购物 购物消费 支付宝 -¥156.20 显示 1 至 5 条，共 24 条记录 1 2 3 © 2025 财务报表分析系统. 保留所有权利. 帮助中心 隐私政策 设置
下载移动应用的代码块，需要的自取
以下是bootstrap样式的下载弹窗样式，可以用在你们的网站上。 下载APP卡片示例 下载移动应用 随时随地获取最新资源，享受更便捷的服务 App Store Google Play
完整源码html: 片单UI设计 战狼2 八百 流浪地球 烈火英雄 长津湖 战狼2 年份 2017 主演 吴京/弗兰克·格里罗/卢靖姗 地区 中国·动作 / 军事 时长 2 小时 3分 该片讲述了脱下军装的冷锋被卷入了一场非洲国家的叛乱，本来能够安全撤离的他无法忘记军人的职责，重回战场展开救援的故事. 八百 年份 2020 主演 欧豪 / 张译 地区 中国·战争 / 冒险 时长 2 小时 27 分 1937年淞沪会战末期，中日双方激战已持续三个月，上海濒临沦陷。第88师262旅524团团副谢晋元率420余人，孤军坚守最后的防线，留守上海四行仓库 。与租界一河之隔，造就了罕见的被围观的战争。为壮声势，实际人数四百人而对外号称八百人 。“八百壮士”奉命留守上海闸北，在苏州河畔的四行仓库鏖战四天，直至10月30日才获令撤往英租界。 流浪地球 年份 2019 主演 吴京 / 赵今麦 地区 中国·科幻 / 灾难 / 冒险 时长 2小时17分 近年来，科学家们发现太阳急速衰老膨胀，短时间内包括地球在内的整个太阳系都将被太阳所吞没。为了自救，人类提出一个名为“流浪地球”的大胆计划，即倾全球之力在地球表面建造上万座发动机和转向发动机，推动地球离开太阳系，用2500年的时间奔往新家园。中国航天员刘培强（吴京饰）在儿子刘启四岁那年前往领航员空间站，和国际同侪肩负起领航者的重任。转眼刘启（屈楚萧 饰）长大，他带着妹妹韩朵朵（赵今麦 饰）偷偷跑到地表，偷开外公韩子昂（吴孟达 饰）的运输车，结果不仅遭到逮捕，还遭遇了全球发动机停摆的事件。为了修好发动机，阻止地球与木星相撞，全球开始展开饱和式营救，连刘启他们的车也被强征加入。在与时间赛跑的过程中，无数的人前仆后继，奋不顾身，只为延续百代子孙生存的希望。 烈火英雄 年份 2019 主演 黄晓明/ 杜江 地区 中国 / 剧情 / 灾难 时长 2小时00分 一场滨海城市石油码头的管道爆炸，牵连了整个原油储存区，一座储油量高达10万立方米的储油罐已经爆炸并且泄露，泄露的原油随时可能引爆临近的油罐，火灾不断升级，爆炸接连发生，然而这还都不是最恐怖的，火场不远处伫立的危险化学物储藏区，像跃跃欲试的魔鬼等待着被点燃，刹那便能带走几百万人的生命，威胁全市、全省，甚至邻国的安全。在这样的危难时刻，一批批消防队员告别家人，赶赴火场. 长津湖 年份 2021 主演 吴京 / 欧豪 地区 中国 / 剧情·历史 / 战争 时长 2 小时 56分 1950年，中国人民志愿军部队与美军在朝鲜长津湖地区交战，中国人民志愿军第9兵团将美军1个多师分割包围于长津湖地区，歼敌1.3万余人，扭转了战场势态。这次战役收复了三八线以北的东部广大地区，是扭转局势的关键一战，而中国人民志愿军也付出了惨痛的牺牲，在零下三十多摄氏度的极端天气中，很多先烈是以端着枪的姿势被冻僵，体现了志愿军战士服从命令、视死如归，冻成冰雕也不退缩的革命精神。 CSS: *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; margin: 0; } body{ display: flex; justify-content: center; align-items: center; background: #65805e; font-family: Arial, Helvetica, sans-serif; } .swiper-box{ position: absolute; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; background: linear-gradient(180deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0) 100%); backdrop-filter: blur(30px); border-radius: 20px; box-shadow: 0 0.5px 0 1px rgba(255,255,255,0.23) inset,0 1px 0 0 rgba(255,255,255,0.66) inset,0 4px 16px rgba(0,0,0,0.12); z-index: 10; padding: 10px 30px; } .swiper{ width: 210px; height: 300px; padding: 20px; } .swiper-slide{ position: relative; border-radius: 10px; user-select: none; box-shadow: 0 15px 50px rgba(0,0,0,0.2); } .swiper-slide img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sub-swiper{ width: 320px; } .subbg{ display: grid; gap: 10px; box-shadow: none; } h1{ color: #fff; margin-bottom: 5px; font-family: 'Maple Mono CN SemiBold',serif; font-weight: 400; } .year, .actor, .cate, .time{ display: flex; align-items: center; gap: 15px; color: #292626; } .tag{ color: #fff; padding: 1px 7px; font-size: 13px; border-radius: 5px; } .describ{ height: 100px; overflow: auto; font-size: 15px; color: #d6d5d5; /*其他隐藏滚动条*/ -ms-overflow-style: none; scrollbar-width: none; } /*chrome隐藏滚动条*/ .describ::-webkit-scrollbar{ display: none; } /*遮罩层*/ .overlay{ position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(to top,#0f2027,transparent,transparent); background-repeat: no-repeat; background-size: cover; } .overlay h2{ position: absolute; bottom: 0; left: 0; color: #fff; font-weight: 400; font-size: 1.1rem; line-height: 1.4; margin: 0 0 20px 20px; } .swiper-pagination{ transform: translateY(10px); }JS: //swiper js库，轮播图 const subSwiper = new Swiper(".sub-swiper", { allowTouchMove: false, // 禁止触摸滑动 loop: true, effect: "fade",//切换动画 fadeEffect: { crossFade: true // 开启交叉淡入淡出 }, }); const mainSwiper = new Swiper(".main-swiper", { effect: "cards",//卡片效果 grabCursor: true,//鼠标滑动显示小手 initialSlide: 2,//初始化时显示第几张图片，0是第一张 loop: true,//无限循环 mousewheel: { //鼠标滑动切换 invert: false, }, pagination: { el: ".swiper-pagination", }, //自动轮播 autoplay: { delay: 3000, // 间隔3秒 disableOnInteraction: false, //操作后停止自动播放 }, thumbs: { swiper: subSwiper, }, }); //通过类名获取所有元素 const coloritems = document.querySelectorAll('.tag'); //定义颜色组 const colors = ["#f35a5a","#f89e37","#3a77fa","#27c263"]; //按组循环赋予颜色 coloritems.forEach((element,index)=>{ const colorindex = index % colors.length; element.style.backgroundColor = colors[colorindex]; });
一款开源的纯H5直播流播放器，兼容几乎所有浏览器
项目介绍Jessibuca是一款开源的纯H5直播流播放器，它通过Emscripten技术将音视频解码库编译成JavaScript（WebAssembly）运行于浏览器之中。这款播放器兼容几乎所有浏览器，并能在PC、手机、微信等平台上无缝运行，无需用户安装任何额外插件。应用场景在线直播：适用于各类在线直播场景，如教育直播、娱乐直播、体育赛事直播等。视频监控：可用于远程视频监控，如安防监控、智能家居监控等。点播服务：支持MP4和HLS格式的点播文件播放，适用于视频点播、影视播放等场景。多媒体应用：可作为多媒体应用中的视频播放组件，集成到各类Web应用中。功能模块核心播放：负责音视频流的解码和播放。协议支持：支持多种传输协议，包括http-flv、websocket-flv、websocket-raw等。解码能力：支持H.264、H.265视频解码，以及AAC、PCMA、PCMU等音频解码。UI组件：提供底部UI操作栏，支持播放/暂停、音量调节、截屏、录制等功能。扩展功能：支持视频录制、多屏播放、加密流解密等高级功能。功能特点跨平台兼容：兼容所有主流浏览器，支持PC、手机、微信等多平台播放。低延迟播放：可设置播放缓冲区时长，支持0缓冲极限低延迟播放。智能丢帧：采用WASM智能不花屏丢帧技术，确保前台长时间播放不累积延迟。多实例支持：可同时创建多个播放实例，满足多路视频播放需求。协议丰富：同时支持http-flv、websocket-flv等多种协议，以及websocket-raw私有协议。安全传输：支持HTTPS/WSS加密视频传输，保障视频内容安全。移动端优化：手机浏览器内打开视频不会全屏播放，且长时间不会息屏。硬件解码：支持WebCodecs和MediaSourceExtensions硬件解码，提升播放性能。高级功能：支持视频录制、画面旋转、镜像、水印添加等高级功能。项目技术栈前端技术：HTML5、JavaScript、CSS3音视频处理：Emscripten、WebAssembly、FFmpeg网络通信：WebSocket、HTTP/HTTPSUI框架：自定义UI组件，适配H5移动端和Web端性能优化：WebWorker多核解码、OffscreenCanvas、GZIP压缩安全加密：HTTPS/WSS、M7S加密、国标SM4加密、XOR加密功能演示开源地址{hide}Jessibuca{/hide}
在Bootstrap中设置一天一次的自动弹窗功能
在 Bootstrap v5.3.0 中实现一天显示一次的自动弹窗功能，可借助 JavaScript 操作 localStorage 或 cookie 来记录弹窗的显示状态，结合 Bootstrap 的模态框组件实现该功能。下面给出一个使用 localStorage 的示例代码：引入必要的文件确保在 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件，同时引入 jQuery（因为示例代码使用了 jQuery 简化 DOM 操作）。 One-time Popup 每日提示 这是每天仅显示一次的弹窗提示信息。 关闭 代码解释HTML 部分：创建了一个 Bootstrap 模态框，其 id 为 myModal，用于显示弹窗内容。模态框包含标题、主体内容和底部的关闭按钮。JavaScript 部分：页面加载完成后，使用 $(document).ready() 函数执行代码。获取当前日期并转换为字符串格式。从 localStorage 中获取上次显示弹窗的日期。若上次显示日期与当前日期不同，使用 bootstrap.Modal 实例化模态框并调用 show() 方法显示模态框。将当前日期存储到 localStorage 中，以便下次访问时进行比较。注意事项兼容性：localStorage 在现代浏览器中得到广泛支持，但在旧版本浏览器中可能存在兼容性问题。若需要支持旧版本浏览器，可考虑使用 cookie 替代。数据清除：localStorage 中的数据不会自动过期，若要清除数据，可手动调用 localStorage.removeItem('lastPopupDate') 或使用 localStorage.clear() 清除所有数据。
比较有趣的倒计时效果，像贪吃蛇一样。 有趣的倒计时 <defs> <filter id="filter"> <fegaussianblur in="SourceGraphic" stddeviation="10" result="blur"></fegaussianblur> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -14" result="filter"></fecolormatrix> <fecomposite in="SourceGraphic" in2="filter" operator="atop"></fecomposite> </filter> </defs> <g class="paths"> <path id="path_0" class="path" d="M185,131.2c0,25.5-5.1,45.6-15.4,60.3c-10.3,14.7-24.1,22-41.7,22c-17.5,0-31.4-7.3-41.5-22 c-10.1-14.7-15.2-34.8-15.2-60.3v-6.6c0-25.5,5.1-45.7,15.2-60.4C96.6,49.4,110.4,42,128,42c17.5,0,31.4,7.4,41.7,22.1 c10.3,14.8,15.4,34.9,15.4,60.4V131.2z"></path> <path id="path_1" class="path" d="M87.9,79.2c1.1-0.4,53.7-39.2,54.9-39.1v180.5"></path> <path id="path_2" class="path" d="M81.7,85.7c-1.4-67,112.3-55.1,90.2,11.6c-12.6,32-70.6,83.7-88.8,113.7h105.8"></path> <path id="path_3" class="path" d="M74.8,178.5c3,39.4,63.9,46.7,88.6,23.7c34.3-35.1,5.4-75.8-41.7-77c29.9,5.5,68.7-43.1,36.5-73.7 c-23.4-21.5-76.5-11.1-78.6,25"> </path> <path id="path_4" class="path" d="M161.9,220.8 161.9,41 72.6,170.9 208.2,170.9"></path> <path id="path_5" class="path" d="M183.2,43.7H92.1l-10,88.3c0,0,18.3-21.9,51-21.9s49.4,32.6,49.4,48.2c0,22.2-9.5,57-52.5,57 s-51.4-36.7-51.4-36.7"></path> <path id="path_6" class="path" d="M177.4,71.6c0,0-4.3-30.3-44.9-30.3s-57.9,45.6-57.9,88.8s9,86.5,56.2,86.5 c38.9,0,50.9-22.3,50.9-60.9c0-17.6-21-44.9-48.2-44.9c-36.2,0-55.2,29.6-55.2,58.2"></path> <path id="path_7" class="path" d="M73.3,43.7 177.7,43.7 97.9,220.6 "></path> <path id="path_8" class="path" d="M126.8,122.8c0,0,48.2-1.3,48.2-42.2s-48.2-39.9-48.2-39.9s-45.9,0-45.9,40.9 c0,20.5,18.8,41.2,46.9,41.2c29.6,0,54.9,18,54.9,47.2c0,0,2,44.9-54.2,44.9c-55.5,0-54.2-43.9-54.2-43.9s-0.3-47.9,53.6-47.9"> </path> <path id="path_9" class="path" d="M78.9,186.3c0,0,4.3,30.3,44.9,30.3s57.9-45.6,57.9-88.8s-9-86.5-56.2-86.5 c-38.9,0-50.9,22.3-50.9,60.9c0,17.6,21,44.9,48.2,44.9c36.2,0,55.2-29.6,55.2-58.2"> </path> </g> <g class="circles"></g> 记录中
这样的小黄人，谁不喜欢呢？源代码