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

20230411----重返学习-网易云音乐首页案例-git远程仓库

news 2025/12/21 17:14:05

day-047-forty-seven-20230411-网易云音乐首页案例-git远程仓库

网易云音乐首页案例

事件委托

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>2.事件委托</title><style>.parent-box {margin: 50px;display: flex;justify-content: space-around;}.parent-box .child-item {height: 500px;width: 15%;}.child-item.child-color-1 {background-color: skyblue;}.child-item.child-color-2 {background-color: yellow;}.child-item.child-color-3 {background-color: blue;}.child-item.child-color-4 {background-color: red;}.child-item.child-color-5 {background-color: pink;}</style></head><body><div class="parent-box"><div class="child-item child-color-1">01</div><div class="child-item child-color-2">02</div><div class="child-item child-color-3">03</div><div class="child-item child-color-4">04</div><div class="child-item child-color-5">05</div></div></body>
</html>
<script>let parentBox = document.querySelector(".parent-box");parentBox.onclick = function (e) {// console.log(`e.target.classList-->`, e.target.classList);//判断if ((e.target.tagName = "div" && e.target.classList.contains("child-color-1"))) {e.target.classList.remove("child-color-1")e.target.classList.add("child-color-2")console.log(`e.target.innerHTML-->`, e.target.innerHTML);return}if ((e.target.tagName = "div" && e.target.classList.contains("child-color-2"))) {e.target.classList.remove("child-color-2")e.target.classList.add("child-color-3")console.log(`e.target.innerHTML-->`, e.target.innerHTML);return}if ((e.target.tagName = "div" && e.target.classList.contains("child-color-3"))) {e.target.classList.remove("child-color-3")e.target.classList.add("child-color-1")console.log(`e.target.innerHTML-->`, e.target.innerHTML);return}};
</script>

观察者模式

观察者单例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>2.事件委托</title><style>.parent-box {margin: 50px;display: flex;justify-content: space-around;}.parent-box .child-item {height: 60px;width: 15%;}.child-item.child-color-1 {background-color: skyblue;}.child-item.child-color-2 {background-color: yellow;}.child-item.child-color-3 {background-color: blue;}.child-item.child-color-4 {background-color: red;}.child-item.child-color-5 {background-color: pink;}</style></head><body><div class="parent-box"><div class="child-item child-color-1">01</div><div class="child-item child-color-2">02</div><div class="child-item child-color-3">03</div><div class="child-item child-color-4">04</div><div class="child-item child-color-5">删除最新一项</div></div></body>
</html>
<script>const observerObject = {data: [],theLength: 0,add(text) {const theItem = {text,id: this.theLength,time: new Date().getTime(),};this.theLength++;this.data.push(theItem);//可以在这里做一些操作console.log(`添加时：this.data-->`, this.data);return theItem.id;},remove(theId) {let index = this.data.findIndex((item) => item.id === theId);if (index >= 0) {this.data.splice(index, 1);}//可以在这里做一些操作console.log(`删除时：this.data-->`, this.data);},clear() {this.data=[]},};let parentBox = document.querySelector(".parent-box");let nowId = 0;parentBox.onclick = function (e) {if (e.target.classList.contains("child-color-5")) {observerObject.remove(nowId);return;}if (e.target.classList.contains("child-item")) {nowId = observerObject.add(e.target.innerHTML);console.log(`nowId-->`, nowId);return;}};
</script>

对observerObject.data的操作都要调用方法，那么就可以在中间做一些操作了。
- 比如新增时，弹出一些文字等，或者渲染html等。

拖拽滚动条

git远程仓库

到https://gitee.com/上登录，没帐号就注册。
点击个人头像，在头像弹出的选项选择个人主页，在个人主页里，移到头像前的加号，点击新建仓库。
填入仓库名称及仓库路径，新建一个项目，并跳转到新建的项目主页，点击克隆/下载，复制好项目远程仓库地址。
在本地的一个文件夹中，右键点击Git Bash Here打开git命令终端1。
在git命令终端1使用git clone 项目远程仓库地址克隆新建的远程仓库地址，得到一个与仓库同名的文件夹。
把本地文件移动到新得到的本地仓库同名文件夹里，并修改好项目。
在本地仓库同名文件夹右键点击Git Bash Here打开git命令终端2。
在git命令终端2使用git add .命令把文件移动到git暂存区。
在git命令终端2使用git commit -m "注释"命令把git暂存区文件提交到git版本库里。
在git命令终端2使用git push命令把本地git版本库的当前分支提交到项目远程仓库。就可以在gitee上的项目主页看到新的代码了。

gitee静态网页服务

在https://gitee.com/上的项目主页里。点击管理。
- 也可以使用github.com，但服务在中国不太稳定。
在管理页面把项目设置为开源。
- 这一步可能需要实名认证。
点击服务，并在弹出的弹框中选择Gitee Pages。
选中自己的分支及部署目录，点击开始或更新，过一段时间就会看到一个网站地址，那个网站地址就是自己的静态页面。
- 这一步可能需要实名认证。

进阶参考

使用gitee部署静态网页
gitee部署好的静态网页
常用git命令行 - 个人的git总结，没发布

20230411----重返学习-网易云音乐首页案例-git远程仓库

day-047-forty-seven-20230411-网易云音乐首页案例-git远程仓库网易云音乐首页案例事件委托 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>2.事件委托</title><style>.parent-box…...

编程日记 2023/4/19 6:04:12

Ansys Zemax | 模拟 AR 系统中的全息光波导：第二部分

AR 系统通常使用全息图将光耦合到波导中。本文展示了如何继续改进本系列文章的第一部分 （点击查看）中建模的初步设计。（联系我们获取文章附件） 简介 AR 是一种允许屏幕上的虚拟世界与现实场景结合并交互的技术。本文演示了如何…...

编程日记 2023/4/19 5:59:11

常用Git命令

整理了一些常用的git命令，备忘查看仓库状态 git status查看提交记录 git log创建本地分支 git branch [branch name]创建远程分支 git push origin [branch name]查看本地分支 git branch -v查看远程分支 git branch -a切换分支 git checkout [branch name]查看远程…...

编程日记 2023/4/19 5:54:10

新手程序员被职场PUA的时候正确的化解姿势

新手程序员遇到了职场p u a 应该怎么办最近我和有个粉丝聊天他刚毕业进入了一家公司就遭遇到了职场p u a 导致自己的自信心被打击非常的痛苦他是属于进入一家小公司而这家公司的代码真的是非常的烂他截图发了一段他目前正在处理的代码给我真的是太烂了很多代码就是属…...

编程日记 2023/4/19 5:49:09

LINUX_kali学习笔记

基础命令命令说明示例pwd查看当前路径ls查看当前文件夹下文件 .开头为隐藏文件 （文件夹下使用ctrlh查看）ls -a（查看文件及隐藏文件）ls -alh（查看文件及显示详情）cd切换目录cd /（切换到根目录&…...

编程日记 2023/4/19 5:44:08

第十天面试实战篇

目录一、springboot的常用注解？ 二、springmvc常用注解？ 三、mysql的内连接和外连接有什么区别？比如有两张表：A和B内连接只返回两个表A和B的交集部分四、redis分布式锁的缺点有哪些？ 五、如何使用reddssion解决r…...

编程日记 2023/4/19 5:39:07

读取yml配置信息 Value("${province}") private String province; Value("${user.sname}") private String name1; Value("${user1[1].name}") private String name; Value("${server.port}") private int port; server:port: 8099 #…...

编程日记 2023/4/19 5:34:06

笔记：Java关于轻量级锁与重量级锁之间的问答

问题：如果在轻量级锁状态下出现锁竞争，不一定会直接升级为重量级锁，而是会先尝试自旋获取锁，那么有a b两个线程竞争锁，a成功获取锁了，b就一定失败，那么轻量级锁就一定升级为重量级锁&#xff0c…...

编程日记 2023/5/31 2:49:09

有哪些通过PMP认证考试的心得值得分享？

回顾这100多天来艰辛的备考经历，感慨颇多一，对于pmp的认知百度百科：PMP（Project Management Professional）指项目管理专业人士（人事）资格认证。美国项目管理协会（PMI）举…...

编程日记 2023/5/29 21:15:18

【unity learn】【Ruby 2D】角色发射飞弹

前面制作了敌人的随机运动以及动画控制，接下来就是Ruby和Robot之间的对决了！ 世界观背景下，小镇上的机器人出了故障，致使全镇陷入了危机，而Ruby肩负着拯救小镇的职责，于是她踏上了修复机器人的旅途。之前…...

编程日记 2023/4/19 5:19:01

C++模板基础（九）

完美转发与 lambda 表达式模板 void f(int& input) {std::cout << "void f(int& input)\t" << input << \n; }void f(int&& input) {std::cout << "void f(int&& input)\t" << input << \n;…...

编程日记 2023/4/19 5:13:59

【剑指 Offer】(1)

文章目录前言一、数组中重复的数字:fire: 解决方法:dog: 代码二、二维数组中的查找:fire:思路:dog:代码三、替换空格:fire:思路:dog: 代码四、从尾到头打印链表:fire:思路:dog:代码:dog: 代码五、重建二叉树:fire:思路:dog: 代码总结前言剑指offer系列是一本非常著名的面试题…...

编程日记 2023/4/19 5:08:58

每日一题 leetcode1026 2023-4-18

1026. 节点与其祖先之间的最大差值力扣题目链接给定二叉树的根节点 root，找出存在于不同节点 A 和 B 之间的最大值 V，其中 V |A.val - B.val|，且 A 是 B 的祖先。 （如果 A 的任何子节点之一为 B，或者 A 的任何…...

编程日记 2023/4/19 5:03:57

【Python_Scrapy学习笔记（十二）】基于Scrapy框架实现POST请求爬虫

基于Scrapy框架实现POST请求爬虫前言本文中介绍如何基于 Scrapy 框架实现 POST 请求爬虫，并以抓取指定城市的 KFC 门店信息为例进行展示正文 1、Scrapy框架处理POST请求方法 Scrapy框架提供了 FormRequest() 方法来发送 POST 请求； FormReques…...

编程日记 2023/4/19 4:58:56

《花雕学AI》02：人工智能挺麻利，十分钟就为我写了一篇长长的故事

ChatGPT最近火爆全网，上线短短两个多月，活跃用户就过亿了，刷新了历史最火应用记录，网上几乎每天也都是ChatGPT各种消息。国内用户由于无法直接访问ChatGPT，所以大部分用户都无缘体验。不过呢，前段时间微软正…...

编程日记 2023/4/19 4:53:55

做程序员累了想要转行？我想给大家分享一下看法

今天早上起床时，我看到有粉丝评论说关于程序员的话题，如果做着觉得累了，就会觉得自己不适合这个工作，想转行。我想给大家分享一下我的看法。在我刚开始工作时，有人说我不适合做这个工作，但是我坚持了下来…...

编程日记 2023/5/31 10:43:36

如果你想从事人工智能职业，学习Python吧

人工智能并不会抢走你的工作，至少目前还不会。人工智能和机器学习（AI/ML）最好的应用是补充人类的创造力，而不是取代它。具有讽刺意味的是，最好的大型语言模型（LLMs）可能是通过使用受版权保护的人…...

编程日记 2023/6/1 5:05:06

百模大战，谁是下一个ChatGPT？

“不敢下手，现在中国还没跑出来一家绝对有优势的大模型，上层应用没法投，担心押错宝。”投资人Jucy（化名）向光锥智能表示，AI项目看得多、投的少是这段时间的VC常态。 ChatGPT点燃AI大爆炸2个月中&#xff0…...

编程日记 2023/5/31 10:45:51

Revit中怎么绘制多面坡度的屋顶及生成墙

一、Revit中怎么绘制多面坡度的屋顶像这种坡屋顶我们可以观察到，它的屋顶轮廓都是带有坡度的，那我可以通过添加定义坡度的方式来绘制出该屋顶。点击建筑选项卡中的屋顶按钮，选择迹线屋顶。选择使用拾取线工具，在选项栏中将偏…...

编程日记 2023/4/19 4:33:45

【jvm系列-07】深入理解执行引擎，解释器、JIT即时编译器

JVM系列整体栏目内容链接地址【一】初识虚拟机与java虚拟机https://blog.csdn.net/zhenghuishengq/article/details/129544460【二】jvm的类加载子系统以及jclasslib的基本使用https://blog.csdn.net/zhenghuishengq/article/details/129610963【三】运行时私有区域之虚拟机栈…...

编程日记 2023/4/19 4:28:44

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/12/12 21:14:39

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名转换路径 …...

编程新知 2025/11/30 23:54:19

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机传统的知识图谱补全（KGC）模型通过…...

编程新知 2025/12/17 23:32:03

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成：一、GC相关暂停 1. 安全点（Safepoint）阻塞现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2025/12/5 14:12:22

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战：各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/6 15:11:15

安卓基础（aar）

重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...

编程新知 2025/12/12 23:11:21

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

20230411----重返学习-网易云音乐首页案例-git远程仓库

day-047-forty-seven-20230411-网易云音乐首页案例-git远程仓库

网易云音乐首页案例

事件委托

观察者模式

拖拽滚动条

git远程仓库

gitee静态网页服务

进阶参考

相关文章：

20230411----重返学习-网易云音乐首页案例-git远程仓库

Ansys Zemax | 模拟 AR 系统中的全息光波导：第二部分

常用Git命令

新手程序员被职场PUA的时候正确的化解姿势

LINUX_kali学习笔记

第十天面试实战篇

YML是一种数据存储格式

笔记：Java关于轻量级锁与重量级锁之间的问答

有哪些通过PMP认证考试的心得值得分享？

【unity learn】【Ruby 2D】角色发射飞弹

C++模板基础（九）

【剑指 Offer】(1)

每日一题 leetcode1026 2023-4-18

【Python_Scrapy学习笔记（十二）】基于Scrapy框架实现POST请求爬虫

《花雕学AI》02：人工智能挺麻利，十分钟就为我写了一篇长长的故事

做程序员累了想要转行？我想给大家分享一下看法

如果你想从事人工智能职业，学习Python吧

百模大战，谁是下一个ChatGPT？

Revit中怎么绘制多面坡度的屋顶及生成墙

【jvm系列-07】深入理解执行引擎，解释器、JIT即时编译器

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

Linux简单的操作

React Native在HarmonyOS 5.0阅读类应用开发中的实践

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

dify打造数据可视化图表

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

安卓基础（aar）

Python 包管理器 uv 介绍

#Uniapp篇：chrome调试unapp适配