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

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

news 2025/7/14 13:38:24

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远程仓库

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

gitee静态网页服务

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

进阶参考

  1. 使用gitee部署静态网页
  2. gitee部署好的静态网页
  3. 常用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 系统通常使用全息图将光耦合到波导中。本文展示了如何继续改进 本系列文章的第一部分 &#xff08;点击查看&#xff09;中建模的初步设计。&#xff08;联系我们获取文章附件&#xff09; 简介 AR 是一种允许屏幕上的虚拟世界与现实场景结合并交互的技术。 本文演示了如何…...

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

常用Git命令

整理了一些常用的git命令&#xff0c;备忘 查看仓库状态 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查看当前文件夹下文件 .开头为隐藏文件 &#xff08;文件夹下使用ctrlh查看&#xff09;ls -a&#xff08;查看文件及隐藏文件&#xff09;ls -alh&#xff08;查看文件及显示详情&#xff09;cd切换目录cd /&#xff08;切换到根目录&…...

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

第十天面试实战篇

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

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

YML是一种数据存储格式

读取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关于轻量级锁与重量级锁之间的问答

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

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

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

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

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

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

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

编程日记 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&#xff0c;找出存在于 不同 节点 A 和 B 之间的最大值 V&#xff0c;其中 V |A.val - B.val|&#xff0c;且 A 是 B 的祖先。 &#xff08;如果 A 的任何子节点之一为 B&#xff0c;或者 A 的任何…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/7/12 20:53:34

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/6 18:33:17

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/7/14 10:03:43

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/7/13 19:29:59

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/13 17:52:07

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/7/13 19:34:59

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/7/13 11:18:21

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/7/7 1:01:12

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/7/6 20:17:05