【源码】基于 HTML、CSS 和 JavaScript 的个人主页系统

项目简介

本项目是一个简单的个人主页系统，具备载入动画、站点简介、一言展示、日期及时间显示、实时天气查询、时光进度条以及音乐播放器等丰富功能，同时支持移动端适配，能为用户带来良好的浏览体验。

项目的主要特性和功能

已实现功能

• 载入动画：增强页面趣味性与交互性。
• 站点简介：介绍站点基本信息。
• Hitokoto 一言：随机展示有意义的语句。
• 日期及时间：实时显示当前日期和时间。
• 实时天气：提供当前天气信息。
• 时光进度条：直观呈现时间流逝。
• 音乐播放器：支持自定义歌单，供用户享受音乐。
• 移动端适配：确保在移动设备上正常浏览。

待实现功能

• 去除 jQuery 依赖，优化项目结构。
• 采用 VUE 进行重构，提升性能和可维护性。

安装使用步骤

天气 API 配置

因原天气 API 不稳定，已更换为新的 API，需前往以下网站获取 key： - 前往 ROLL 获取 app_id 和 app_secret，用于获取城市信息。 - 前往 和风天气 获取 key，用于获取天气信息，也可自行更换其他方式。

音乐播放器配置

本项目采用基于 MetingJS 的 Aplayer 音乐播放器，可快速自定义歌单。 - 仅支持中国大陆地区，其他区域需将 以下内容 替换 music.js 以实现音乐播放器正常使用。 - 更改 music.js 的参数即可实现自定义歌单列表，示例如下： js let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我 let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片 let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID

字体配置

现采用 HarmonyOS Sans 开源字体，采用字体拆分提升加载速度。由于本站 CDN 已开启防盗链，非本站域名不可访问，请将字体引入链接更改为 https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css，否则自定义字体将失效。

运行项目

将项目源码文件下载到本地后，直接在浏览器中打开相应的 HTML 文件即可访问主页。由于 CDN 缓存原因，查看最新效果可能需要 Ctrl + F5 强制刷新浏览器缓存。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】