当前位置：首页 > news >正文

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

news 来源：原创 2025/6/12 19:17:03

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

项目概述
项目视图效果
一、侧边栏相关代码
- （一）HTML代码
- （二）css代码
二、登录页面
- （一）HTML代码
- （二）css代码
- （三）js代码
三、剩余代码以及所有源代码Gitee地址

项目概述

在当今数字化时代，音乐已然成为人们生活中不可或缺的一部分。本次带来的音乐播放器 HTML 项目，旨在打造一个具备基础且实用功能的音乐播放平台。通过 HTML、CSS 和 JavaScript 等前端技术的巧妙融合，实现一个界面美观、操作便捷的音乐播放器，满足用户在本地浏览音乐库、播放音乐等多样化需求。

提示！！！！

由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取
我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE
由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取
我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE
由于项目代码太多，代码全部内容放置在我的Gitee码云中，需要的小伙伴们自取
我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE

项目视图效果

在这里插入图片描述

下面列出一些我的项目代码
下面列出一些我的项目代码

一、侧边栏相关代码

（一）HTML代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的音乐</title><link rel="stylesheet" href="侧边栏.css">
</head><body><!-- 顶部导航栏 --><nav class="top-nav tech-style"><div class="logo"><span class="logo-text"></span></div><ul><li><a href="#">赞助商</a></li><li><a href="#">BUG反馈</a></li><li><a href="#">联系我们</a></li></ul></nav>
<!-- 侧边栏导航栏 -->
<div class="shell"><ul class="nav"><li class="activeonly" id="logo"><a href="../html.css.java部分/音乐主页.html"><div class="text">目录</div></a></li><li><a href="../html.css.java部分/音乐主页.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">播放器主页</div></a></li><li><a href="../html.css.java部分/音乐库.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">音乐库</div></a></li><li><a href="../html.css.java部分/分类音乐类型.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">音乐分类</div></a></li><li><a href="../html.css.java部分/歌手分类.html"><div class="icon"><i class="iconfont icon-zhuti_tiaosepan"></i></div><div class="text">歌手分类</div></a></li><li><a href="../html.css.java部分/我的主页.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">我的主页</div></a></li><li><a href="../html.css.java部分/我的收藏.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">我的收藏</div></a></li><li><a href="./我的主页.html"><div class="icon"><i class="iconfont icon-cangku"></i></div><div class="text">系统设置</div></a></li><li><a href="./成为创作者.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">成为创作者</div></a></li><li><a href="./vip区域.html"><div class="icon"><i class="iconfont icon-dunpaibaoxianrenzheng"></i></div><div class="text">超级会员VIP</div></a></li></ul>
</div><script>// 1. 获取所有类名为.nav下的 <li> 元素let nav = document.querySelectorAll(".nav li");function activeLink() {nav.forEach((item) => item.classList.remove("active"));this.classList.add("active");// 4. 隐藏所有非 "directory-content" 的 <section> 元素document.querySelectorAll('section[id!="directory-content"]').forEach((section) => {section.style.display = 'none';});// 5. 判断当前点击的 <li> 元素 idif (this.id === 'logo') {// 如果是 'logo'，显示 "directory-content" 元素document.getElementById('directory-content').style.display = 'block';} else {// 否则，显示和当前点击 <li> 元素 id 对应的元素document.getElementById(this.id).style.display = 'block';}}
</script>
</body></html>

（二）css代码

/* 全局样式重置，去除默认边距、内边距，设置盒模型及去掉列表和链接默认样式 */
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;text-decoration: none;
}/* 页面主体样式，设置背景及顶部预留空间 */
body {background: rgba(228, 233, 245, 0);padding-top: 60px;
}/* 科技感顶部导航栏整体样式，包含背景、颜色、布局、定位等 */
nav.top-nav.tech-style {background-color: #000;color: #ccc;display: flex;justify-content: space-between;align-items: center;padding: 15px 30px;position: fixed;top: 0;left: 0;width: 100%;z-index: 9998;
}/* 导航栏渐变背景伪元素，增加层次感 */
nav.top-nav.tech-style:before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, #000000, #000000);opacity: 0.2;z-index: 0;
}/* 导航栏logo样式，设置对齐和字体 */
nav.top-nav.tech-style.logo {display: flex;align-items: center;font-size: 22px;font-weight: bold;
}/* 导航栏列表样式，去除默认样式并设为弹性布局 */
nav.top-nav.tech-style ul {list-style-type: none;display: flex;
}/* 导航栏列表项样式，设置左边距间隔 */
nav.top-nav.tech-style ul li {margin-left: 25px;
}/* 导航栏链接样式，设置颜色、内边距、过渡效果等 */
nav.top-nav.tech-style ul li a {color: #ccc;text-decoration: none;padding: 6px 12px;border-radius: 5px;transition: color 0.3s ease, background-color 0.3s ease;position: relative;
}/* 导航栏链接底部横线伪元素，初始宽度为0，用于悬停效果 */
nav.top-nav.tech-style ul li a:before {content: "";position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #00f2ff;transition: width 0.3s ease;
}/* 导航栏链接悬停时文字变色 */
nav.top-nav.tech-style ul li a:hover {color: #00f2ff;
}/* 导航栏链接悬停时底部横线展开 */
nav.top-nav.tech-style ul li a:hover:before {width: 100%;
}/* 侧边栏整体样式，固定定位、设置宽度、背景等及过渡效果 */
.shell {position: fixed;width: 40px;height: 100%;background: #000000;z-index: 9999;transition: width 0.5s;padding-left: 3px;overflow: hidden;margin-top: -10px;
}/* 侧边栏悬停变宽 */
.shell:hover {width: 150px;
}/* 侧边栏列表样式，相对定位及设置高度 */
.shell ul {position: relative;height: 100vh;
}/* 侧边栏列表项样式，相对定位及内边距 */
.shell ul li {position: relative;padding: 3px;
}/* 侧边栏激活项样式，设置背景和圆角 */
.activeonly {background: #e4e9f5;border-top-left-radius: 30px;border-bottom-left-radius: 30px;
}/* 侧边栏激活项右上角伪元素，用于视觉效果 */
.activeonly::before {content: "";position: absolute;top: -20px;right: 0;width: 20px;height: 20px;border-bottom-right-radius: 15px;box-shadow: 3px 3px 0 3px #e4e9f5;background: transparent;
}/* 侧边栏激活项右下角伪元素，用于视觉效果 */
.activeonly::after {content: "";position: absolute;bottom: -20px;right: 0;width: 20px;height: 20px;border-top-right-radius: 15px;box-shadow: 3px -3px 0 3px #e4e9f5;background: transparent;
}/* 侧边栏中id为logo元素的样式，设置外边距 */
#logo {margin: 30px 0 70px 0;
}/* 侧边栏列表项链接整体样式，相对定位及布局设置 */
.shell ul li a {position: relative;display: flex;white-space: nowrap;
}/* 侧边栏图标样式，设置尺寸、颜色、对齐等 */
.icon {min-width: 30px;padding-left: 3px;height: 35px;color: #fff;display: flex;justify-content: center;align-items: center;transition: 0.5s;
}/* 图标内字体图标大小 */
.icon i {font-size: 15px;
}/* 侧边栏文字样式，设置尺寸、颜色、对齐等 */
.text {height: 35px;display: flex;align-items: center;font-size: 12px;color: #ffad32c1;padding-left: 8px;text-transform: uppercase;letter-spacing: 1.5px;transition: 0.5s;
}/* 侧边栏列表项悬停时图标和文字变色 */
.shell ul li:hover a.icon,
.shell ul li:hover a.text {color: #ffa117;
}/* 侧边栏激活项图标伪元素，用于装饰效果 */
.activeonly a.icon::before {content: "";position: absolute;inset: 3px;width: 40px;background: #000000;border-radius: 50%;transition: 0.5s;border: 5px solid #ffa117;box-sizing: border-box;
}

效果图

在这里插入图片描述

二、登录页面

（一）HTML代码

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>注册登录界面</title><link rel="stylesheet" href="注册登录页面.css">
</head><body><div class="container"><div class="form-box"><!-- 注册 --><div class="register-box hidden"><h1>注册</h1><input type="text" placeholder="用户名" id="register-username"><input type="email" placeholder="邮箱" id="register-email"><input type="password" placeholder="密码" id="register-password"><input type="password" placeholder="确认密码" id="register-password-confirm"><button onclick="registerSubmit()">注册</button></div><!-- 登录 --><div class="login-box"><h1>登录</h1><input type="text" placeholder="用户名" id="login-username"><input type="password" placeholder="密码" id="login-password"><button onclick="loginSubmit()">登录</button></div></div><div class="con-box left"><h2>欢迎来到<span>我的音乐</span></h2><img src="图片/OIP-C.jpg" alt=""><p>已有账号</p><button id="login">去登录</button></div><div class="con-box right"><h2>欢迎来到<span>我的音乐</span></h2><img src="图片/01c2445861085ea8012060c8b394f2.jpg" alt=""><p>没有账号？</p><button id="register">去注册</button></div></div><script src="注册登录页面.js"></script>
</body></html>

（二）css代码

* {/* 初始化 */margin: 0;padding: 0;
}body {/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg, #328bff, #00ffd0);
}.container {background-color: #fff;width: 650px;height: 415px;border-radius: 5px;/* 阴影 */box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);/* 相对定位 */position: relative;
}.form-box {/* 绝对定位 */position: absolute;top: -10%;left: 5%;background-color: #d3b7d8;width: 320px;height: 500px;border-radius: 5px;box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);display: flex;justify-content: center;align-items: center;z-index: 2;/* 动画过渡 加速后减速 */transition: 0.5s ease-in-out;
}.register-box,
.login-box {/* 弹性布局 垂直排列 */display: flex;flex-direction: column;align-items: center;width: 100%;
}.hidden {display: none;transition: 0.5s;
}h1 {text-align: center;margin-bottom: 25px;/* 大写 */text-transform: uppercase;color: #fff;/* 字间距 */letter-spacing: 5px;
}input {background-color: transparent;width: 70%;color: #fff;border: none;/* 下边框样式 */border-bottom: 1px solid rgba(255, 255, 255, 0.4);padding: 10px 0;text-indent: 10px;margin: 8px 0;font-size: 14px;letter-spacing: 2px;
}input::placeholder {color: #fff;
}input:focus {color: #6e62ad;outline: none;border-bottom: 1px solid #6295ad;transition: 0.5s;
}input:focus::placeholder {opacity: 0;
}.form-box button {width: 70%;margin-top: 35px;background-color: #f6f6f6;outline: none;border-radius: 8px;padding: 13px;color: #62ad77;letter-spacing: 2px;border: none;cursor: pointer;
}.form-box button:hover {background-color: #626dad;color: #f6f6f6;transition: background-color 0.5s ease;
}/* 新增的加载动画样式 */
.login-box.loading-animation {animation: loading 1s ease-in-out;
}@keyframes loading {0% {opacity: 1;}50% {opacity: 0.5;}100% {opacity: 1;}
}.con-box {width: 50%;/* 弹性布局 垂直排列 居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 绝对定位 居中 */position: absolute;top: 50%;transform: translateY(-50%);
}.con-box.left {left: -2%;
}.con-box.right {right: -2%;
}.con-box h2 {color: #8e9aaf;font-size: 25px;font-weight: bold;letter-spacing: 3px;text-align: center;margin-bottom: 4px;
}.con-box p {font-size: 12px;letter-spacing: 2px;color: #8e9aaf;text-align: center;
}.con-box span {color: #427eff;
}.con-box img {width: 150px;height: 150px;opacity: 0.9;margin: 40px 0;
}.con-box button {margin-top: 3%;background-color: #fff;color: #a262ad;border: 1px solid #d3b7d8;padding: 6px 10px;border-radius: 5px;letter-spacing: 1px;outline: none;cursor: pointer;
}.con-box button:hover {background-color: #b7c2d8;color: #ffffff;
}

（三）js代码

// 获取相关DOM元素
let login = document.getElementById('login');
let register = document.getElementById('register');
let form_box = document.getElementsByClassName('form-box')[0];
let register_box = document.getElementsByClassName('register-box')[0];
let login_box = document.getElementsByClassName('login-box')[0];
let loginUsername = document.getElementById('login-username');
let loginPassword = document.getElementById('login-password');
let registerUsername = document.getElementById('register-username');
let registerEmail = document.getElementById('register-email');
let registerPassword = document.getElementById('register-password');
let registerPasswordConfirm = document.getElementById('register-password-confirm');// 模拟用户数据存储（简单示例，实际应用中可替换为更合适的存储方式，如localStorage、发送到后端等）
// 这里不再使用这个简单的数组存储，而是使用localStorage// 去注册按钮点击事件
register.addEventListener('click', () => {form_box.style.transform = 'translateX(80%)';login_box.classList.add('hidden');register_box.classList.remove('hidden');
});// 去登录按钮点击事件
login.addEventListener('click', () => {form_box.style.transform = 'translateX(0%)';register_box.classList.add('hidden');login_box.classList.remove('hidden');
});function loginSubmit() {const inputUsername = loginUsername.value;const inputPassword = loginPassword.value;// 从localStorage获取存储的用户信息const storedUsers = JSON.parse(localStorage.getItem('users')) || [];const user = storedUsers.find(u => u.username === inputUsername && u.password === inputPassword);if (user) {// 给登录按钮所在的父容器添加加载动画类document.querySelector('.login-box').classList.add('loading-animation');// 等待动画结束（这里简单设置一个定时器模拟动画时长，实际中可以根据动画的真实时长来调整）setTimeout(() => {window.location.href = '音乐主页.html';}, 500); // 假设动画时长为1秒，可根据实际调整} else {alert("用户名或密码错误，请重新输入");}
}function registerSubmit() {const username = registerUsername.value;const email = registerEmail.value;const password = registerPassword.value;const passwordConfirm = registerPasswordConfirm.value;if (password === passwordConfirm) {// 从localStorage获取已存储的用户信息列表，若不存在则初始化为空数组const storedUsers = JSON.parse(localStorage.getItem('users')) || [];// 创建新用户对象const newUser = {username: username,email: email,password: password};// 将新用户添加到用户列表storedUsers.push(newUser);// 将更新后的用户列表存储回localStoragelocalStorage.setItem('users', JSON.stringify(storedUsers));alert("注册完成");// 跳转到登录页面form_box.style.transform = 'translateX(0%)';register_box.classList.add('hidden');login_box.classList.remove('hidden');} else {alert("两次输入的密码不一致，请重新输入");}
}

由于代码太多剩余的代码我将放到我的Gitee地址，需要的小伙伴们自取

由于项目代码量较多，本文仅展示了侧边栏和登录页面的相关代码。剩余部分包括音乐播放器的核心功能实现，如音乐的播放、暂停、切换、进度控制等功能的代码，以及音乐库展示、音乐分类筛选等相关代码。所有源代码已上传至 Gitee 仓库，感兴趣的小伙伴可以前往获取，进行学习和进一步的开发优化。希望这个项目能为大家在前端开发学习和实践中提供一些帮助和启发。
在这里插入图片描述

三、剩余代码以及所有源代码Gitee地址

我的码云链接https://gitee.com/srte-7719/project-experience/tree/master/HTML%E9%A1%B9%E7%9B%AE

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目项目概述项目视图效果一、侧边栏相关代码（一）HTML代码（二）css代码二、登录页面（一）HTML代码（二）css代码…...

编程日记 2025/6/2 14:59:03

PixArt--alpha笔记

PixArt-α 是华为发布的文生图模型。训练策略分解：设计三个不同训练步骤，分别优化像素依赖、文本图像对齐和图像审美质量。高效T2I transformer：将 cross-attention融入 Diffusion Transformer (DiT)注入文本条件，简化计算密集的…...

编程日记 2025/5/31 20:50:06

内网渗透测试工具及渗透测试安全审计方法总结

1. 内网安全检查/渗透介绍 1.1 攻击思路有2种思路： 攻击外网服务器，获取外网服务器的权限，接着利用入侵成功的外网服务器作为跳板，攻击内网其他服务器，最后获得敏感数据，并将数据传递到攻击者&#xff0…...

编程日记 2025/6/2 18:17:36

java工程学习步骤

1、安装idea，安装maven，mysql数据库 2、创建一个多maven的springboot的项目，可以正常启动以及可以访问web页面 3、引入日志使用slflogbck进行日志打印，同时封装统一的日志打印工具，idea安装maven analyzer工具&#…...

编程日记 2025/6/3 16:34:30

使用Flask和Pydantic实现参数验证

使用Flask和Pydantic实现参数验证 1 简介 Pydantic是一个用于数据验证和解析的 Python 库，版本2的性能有较大提升，很多框架使用Pydantic做数据校验。 # 官方参考文档 https://docs.pydantic.dev/latest/# Github地址 https://github.com/pydantic/pyd…...

编程日记 2025/6/3 10:36:27

LabVIEW 蔬菜精密播种监测系统

在当前蔬菜播种工作中，存在着诸多问题。一方面，播种精度难以达到现代农业的高标准要求，导致种子分布不均，影响作物的生长发育和最终产量；另一方面，对于小粒径种子，传统的监测手段难以实现有效监…...

编程日记 2025/5/25 1:42:37

统信UOS系统安装redis

1、yum引入redis yum install redis2、创建日志文件夹 mkdir -p /var/log/redis mkdir -p /var/lib/redis3、添加用户 useradd redis -s /usr/sbin/nologin4、文件夹赋权限 chown -R redis:root /var/log/redis chown redis:root /etc/redis.conf chown -R redis:root /var…...

编程日记 2025/5/24 7:51:43

课程如何抵御脑腐的冲击

课程需要引导学生逐步形成深度思考的能力，才有可能抵御‘Brain Rot’，否则都不会取得任何改善。一步步失去的思维力，需要一步步引导恢复，类似康复训练。这是一个非常长期而艰辛但又十分有意义和有价值的工作。这是一篇类似工作转…...

编程日记 2025/6/3 16:02:47

2.4 如何学习表示学习（Representation Learning）

如何学习表示学习（Representation Learning）学习表示学习（Representation Learning）是理解和掌握机器学习、深度学习以及人工智能的关键一步。表示学习主要关注从原始数据中提取有效的特征或表示，使得模型能够高效处理和理解复杂的数据。以下是一些系统的方法，帮助你一…...

编程日记 2025/6/3 21:46:48

介绍下常用的前端框架及时优缺点

以下是一些常用的前端框架及其优缺点介绍： React • 优点 • 组件化架构：可构建可复用的UI组件，提高开发效率和组件可维护性。 • 虚拟DOM：高效更新页面，减少直接操作DOM的性能开销。 • 灵活性和可扩展性&#xf…...

编程日记 2025/5/29 13:55:44

Rust 猜数字游戏：从 0 到 1 的完整实现与深入解析

一、项目概述 1.1 为什么选择“猜数字”？ “猜数字”是编程入门中非常经典的一个项目。它看似简单，却能很好地展示： 输入输出 (I/O)：提示用户输入并读取内容。随机数：每次运行生成一个随机值，保证游戏的…...

编程日记 2025/6/2 18:29:17

使用C语言实现栈的插入、删除和排序操作

栈是一种后进先出（LIFO, Last In First Out）的数据结构，这意味着最后插入的元素最先被删除。在C语言中，我们可以通过数组或链表来实现栈。本文将使用数组来实现一个简单的栈，并提供插入（push）、删除（pop）以及排序（这里采用一种简单的排序方法，例如冒泡排序）的操作示…...

编程日记 2025/5/31 2:56:19

职场的三个阶段及其应对规划：以前端开发工程师为例

作为职场人士，特别是 IT 开发工程师，职业生涯的发展路径往往伴随着不同的挑战与机遇。一般而言，职场生涯可以划分为三个阶段：找工作阶段、有工作阶段以及职业转型阶段。每个阶段都有其特定的特征和应对策略，下面我将从…...

编程日记 2025/5/30 22:35:23

【人工智能】：搭建本地AI服务——Ollama、LobeChat和Go语言的全方位实践指南

前言随着自然语言处理（NLP）技术的快速发展，越来越多的企业和个人开发者寻求在本地环境中运行大型语言模型（LLM），以确保数据隐私和提高响应速度。Ollama 作为一个强大的本地运行框架，支持多种先…...

编程日记 2025/6/2 10:15:01

蓝桥杯训练—斐波那契数列

文章目录一、题目二、解析三、代码一、题目求100以内的斐波那契数列斐波那契数列（Fibonacci sequence），又称黄金分割数列 ，因数学家莱昂纳多斐波那契（Leonardo Fibonacci）以兔子繁殖为例子而引入&…...

编程日记 2025/6/4 4:54:22

TensorFlow DAY3: 高阶 API（Keras，Estimator）（完）

TensorFlow 作为深度学习框架，当然是为了帮助我们更便捷地构建神经网络。所以，本次实验将会了解如何使用 TensorFlow 来构建神经网络，并学会 TensorFlow 构建神经网络的重要函数和方法。知识点 Keras 顺序模型Keras 函数模型Keras 模型存储…...

编程日记 2025/6/3 2:30:19

复健第二天之[MoeCTF 2022]baby_file

打开题目在线环境可以看到： 感觉要用伪协议去求，但是我们并不知道flag的位置，这里我选择用dirsearch去扫一下： 最像的应该就是flag.php了于是就构建payload： **?filephp://filter/convert.base64-encode/resource…...

编程日记 2025/6/2 23:36:17

【QT用户登录与界面跳转】

【QT用户登录与界面跳转】 1.前言2. 项目设置3.设计登录界面3.1 login.pro参数3.2 界面设置3.2.1 登录界面3.2.2 串口主界面 4. 实现登录逻辑5.串口界面6.测试功能7.总结 1.前言在Qt应用程序开发中，实现用户登录及界面跳转功能是构建交互式应用的重要步骤之一。下…...

编程日记 2025/6/1 11:08:07

【docker踩坑记录】

docker踩坑记录踩坑记录(持续更新中.......)docker images 权限问题踩坑记录(持续更新中…) docker images 权限问题 permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.s…...

编程日记 2025/5/29 6:37:50

【Azure 架构师学习笔记】- Azure Function (2) --实操1

本文属于【Azure 架构师学习笔记】系列。本文属于【Azure Function 】系列。接上文【Azure 架构师学习笔记】- Azure Function (1) --环境搭建和背景介绍前言上一文介绍了环境搭建，接下来就在本地环境下使用一下。环境准备这里我下载了最新的VS studio&…...

编程日记 2025/6/2 16:26:49

豆包MarsCode：构造特定数组的逆序拼接

问题描述思路分析 1. 数组的组成： 我们要根据 i 的不同值拼接出不同长度的子数组。对于每个 i 从 1 到 n，我们要把数字从 n 逆序到 i 拼接成一个子数组。例如，当 i 1 时，拼接 [n, n-1, ..., 1]。当 i 2 时，拼接 …...

编程日记 2025/6/4 9:55:25

14-美妆数据分析

前言美妆数据分析可以帮助企业更好地理解市场趋势、客户偏好和产品表现 import pandas as pd import numpy as np 一、数据清洗 data pd.read_csv(rC:\Users\B\Desktop\美妆数据.csv,encodinggbk) data.head()data.info()data data.drop_duplicates(inplaceFalse) data.r…...

编程日记 2025/6/3 16:16:28

新阿里云买服务器配置需手动配置80端口

新买阿里云服务器需手动配置80，端口才可以访问nginx CentOS系统安装nginx 1. 安装 Nginx yum install nginx 2. 启动 Nginx 服务 systemctl start nginx 3. 修改默认网页 cd /usr/share/nginx/ echo "666" >index.html cat index.html 访问ngin最后…...

编程日记 2025/6/4 6:15:16

Mysql--实战篇--连接泄漏问题（什么是连接泄漏，未关闭SqlSession，长事务处理，连接池管理等）

1、什么是连接泄漏（Connection Leak）？ 连接泄漏是指应用程序未能正确关闭数据库连接，导致连接池中的可用连接逐渐减少，最终耗尽所有连接。连接泄漏可能会导致新的请求无法获得连接，进而引发服务中断。连…...

编程日记 2025/6/3 5:01:14

【ESP32】ESP-IDF开发 | WiFi开发 | AP模式 + 基站连接例程

1. 简介前面一篇讲了WiFi的基站模式，演示了怎么编程连接AP，所以这一篇讲一讲AP模式，ESP32作AP，让其他的设备连接自己。 1.1 DHCP 这里需要补充一个知识点——DHCP服务器。当基站连接一个AP时，会被分配一个IP&#xf…...

编程日记 2025/6/1 10:23:02

Ubuntu升级Linux内核教程

本文作者CVE-柠檬i: CVE-柠檬i-CSDN博客本文使用的方法是dpkg安装，目前版本为5.4.0-204，要升级成5.8.5版本下载下载网站：https://kernel.ubuntu.com/mainline/ 在该网站下载deb包，选择自己想要升级的版本，这里是5…...

编程日记 2025/6/4 8:32:10

关于AWS网络架构的思考

目录： AWS概述 EMR Serverless AWS VPC及其网络关于AWS网络架构的思考在AWS K8S中部署的业务，有不同的流量路径。流量进入客户端请求普通的客户端流量流向从前到后是: 客户端公司网关(endpoint)业务的Endpoint ServiceLoad Balancers(监听80和…...

编程日记 2025/6/3 21:42:58

Pandas库的常用内容归纳

Pandas 是一个强大的 Python 数据分析库，提供了大量用于数据处理和分析的功能。以下是一些 Pandas 库中常用的功能： 数据创建和操作 Series 和 DataFrame：创建一维的 Series 和二维的 DataFrame 对象。数据导入：从 CSV、Excel、…...

编程日记 2025/5/29 23:32:21

【错误解决方案记录】spine3.8.75导出的数据使用unity-spine3.8插件解析失败报错的解决方案

报错信息 Exception: Unsupported skeleton data, please export with a newer version of Spine. Spine.SkeletonBinary.ReadSkeletonData (System.IO.Stream file) (at Assets/Spine/Runtime/spine-csharp/SkeletonBinary.cs:132) Spine.Unity.Editor.AssetUtility.AddRequi…...

编程日记 2025/6/3 2:31:38

音乐播放器实现:前端HTML，CSS，JavaScript综合大项目

项目概述

提示！！！！

项目视图效果

一、侧边栏相关代码

（一）HTML代码

（二）css代码

二、登录页面

（一）HTML代码

（二）css代码

（三）js代码

三、剩余代码以及所有源代码Gitee地址

相关文章：