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

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

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…...

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

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

常用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]查看远程…...

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

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

LINUX_kali学习笔记

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

第十天面试实战篇

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

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 #…...

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

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

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

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

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

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

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;…...

【剑指 Offer】(1)

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

每日一题 leetcode1026 2023-4-18

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

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

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

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

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

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

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

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

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

百模大战,谁是下一个ChatGPT?

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

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

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

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

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...