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远程仓库
- 到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…...
Ansys Zemax | 模拟 AR 系统中的全息光波导：第二部分
AR 系统通常使用全息图将光耦合到波导中。本文展示了如何继续改进 本系列文章的第一部分 （点击查看）中建模的初步设计。（联系我们获取文章附件） 简介 AR 是一种允许屏幕上的虚拟世界与现实场景结合并交互的技术。 本文演示了如何…...
常用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]查看远程…...
新手程序员被职场PUA的时候正确的化解姿势
新手程序员遇到了职场p u a 应该怎么办 最近我和有个粉丝聊天 他刚毕业进入了一家公司 就遭遇到了职场p u a 导致自己的自信心被打击 非常的痛苦 他是属于进入一家小公司 而这家公司的代码真的是非常的烂 他截图发了一段他目前 正在处理的代码给我 真的是太烂了 很多代码就是属…...
LINUX_kali学习笔记
基础命令 命令说明示例pwd查看当前路径ls查看当前文件夹下文件 .开头为隐藏文件 （文件夹下使用ctrlh查看）ls -a（查看文件及隐藏文件）ls -alh（查看文件及显示详情）cd切换目录cd /（切换到根目录&…...
第十天面试实战篇
目录 一、springboot的常用注解？ 二、springmvc常用注解？ 三、mysql的内连接和外连接有什么区别？比如有两张表：A和B内连接只返回两个表A和B的交集部分 四、redis分布式锁的缺点有哪些？ 五、如何使用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关于轻量级锁与重量级锁之间的问答
问题：如果在轻量级锁状态下出现锁竞争，不一定会直接升级为重量级锁，而是会先尝试自旋获取锁，那么有a b两个线程竞争锁，a成功获取锁了，b就一定失败，那么轻量级锁就一定升级为重量级锁，…...
有哪些通过PMP认证考试的心得值得分享？
回顾这100多天来艰辛的备考经历，感慨颇多 一，对于pmp的认知 百度百科：PMP（Project Management Professional）指项目管理专业人士（人事）资格认证。美国项目管理协会（PMI）举…...
【unity learn】【Ruby 2D】角色发射飞弹
前面制作了敌人的随机运动以及动画控制，接下来就是Ruby和Robot之间的对决了！ 世界观背景下，小镇上的机器人出了故障，致使全镇陷入了危机，而Ruby肩负着拯救小镇的职责，于是她踏上了修复机器人的旅途。 之前…...
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，找出存在于 不同 节点 A 和 B 之间的最大值 V，其中 V |A.val - B.val|，且 A 是 B 的祖先。 （如果 A 的任何子节点之一为 B，或者 A 的任何…...
【Python_Scrapy学习笔记（十二）】基于Scrapy框架实现POST请求爬虫
基于Scrapy框架实现POST请求爬虫 前言 本文中介绍 如何基于 Scrapy 框架实现 POST 请求爬虫，并以抓取指定城市的 KFC 门店信息为例进行展示 正文 1、Scrapy框架处理POST请求方法 Scrapy框架 提供了 FormRequest() 方法来发送 POST 请求； FormReques…...
《花雕学AI》02：人工智能挺麻利，十分钟就为我写了一篇长长的故事
ChatGPT最近火爆全网，上线短短两个多月，活跃用户就过亿了，刷新了历史最火应用记录，网上几乎每天也都是ChatGPT各种消息。国内用户由于无法直接访问ChatGPT，所以大部分用户都无缘体验。不过呢，前段时间微软正…...
做程序员累了想要转行？我想给大家分享一下看法
今天早上起床时，我看到有粉丝评论说关于程序员的话题，如果做着觉得累了，就会觉得自己不适合这个工作，想转行。我想给大家分享一下我的看法。 在我刚开始工作时，有人说我不适合做这个工作，但是我坚持了下来…...
如果你想从事人工智能职业，学习Python吧
人工智能并不会抢走你的工作，至少目前还不会。人工智能和机器学习（AI/ML）最好的应用是补充人类的创造力，而不是取代它。具有讽刺意味的是，最好的大型语言模型（LLMs）可能是通过使用受版权保护的人…...
百模大战，谁是下一个ChatGPT？
“不敢下手，现在中国还没跑出来一家绝对有优势的大模型，上层应用没法投，担心押错宝。”投资人Jucy（化名）向光锥智能表示，AI项目看得多、投的少是这段时间的VC常态。 ChatGPT点燃AI大爆炸2个月中࿰…...
Revit中怎么绘制多面坡度的屋顶及生成墙
一、Revit中怎么绘制多面坡度的屋顶 像这种坡屋顶我们可以观察到，它的屋顶轮廓都是带有坡度的，那我可以通过添加定义坡度的方式来绘制出该屋顶。 点击建筑选项卡中的屋顶按钮，选择迹线屋顶。 选择使用拾取线工具，在选项栏中将偏…...
【jvm系列-07】深入理解执行引擎，解释器、JIT即时编译器
JVM系列整体栏目 内容链接地址【一】初识虚拟机与java虚拟机https://blog.csdn.net/zhenghuishengq/article/details/129544460【二】jvm的类加载子系统以及jclasslib的基本使用https://blog.csdn.net/zhenghuishengq/article/details/129610963【三】运行时私有区域之虚拟机栈…...
零代码玩转OpenClaw：ollama-QwQ-32B自动化脚本生成教程
零代码玩转OpenClaw：ollama-QwQ-32B自动化脚本生成教程 1. 为什么选择OpenClawollama-QwQ-32B组合？ 上周我在整理旅行照片时，面对上千张命名混乱的图片文件，突然意识到：这不正是测试OpenClaw自动化能力的绝佳场景吗&…...
互联网大厂 Java 面试实战：一次“高并发系统追问”下的真实对话
在大多数 Java 面试中，真正拉开差距的从来不是“你会多少知识点”，而是当系统出现问题时，你是否知道该怎么扛。很多候选人熟悉各种八股文，但一旦进入场景题就会卡住。下面通过一场更贴近真实大厂风格的面试，对话式还原…...
[特殊字符] 怕你停电的姐姐：UPS 还分 “直流” 和 “交流”？ 今天一篇给你盘个透！
哈喽，我的老铁们！我是你们那个 “怕你停电” 的姐姐，也是专门卖 UPS 电源的姐姐！平时总有朋友问我：“姐姐，我看 UPS 有好多种，什么直流交流的，到底有啥区别？我该咋选&…...
)
缺失的第一个正数(力扣100)
最朴素的想法就是从1开始查找，看看谁不在，时间复杂度为On但是需要把原数组变成集合，空间复杂度为On不符合题目的常数级空间开销我们要找的是“第一个缺失的正数”。如果数组长度是 $N$，那么这个答案一定落在 [1, N1] 这个区间里。…...
5个必知技巧：让你的PT下载效率提升300%的浏览器插件指南
5个必知技巧：让你的PT下载效率提升300%的浏览器插件指南 【免费下载链接】PT-Plugin-Plus PT 助手 Plus，为 Microsoft Edge、Google Chrome、Firefox 浏览器插件（Web Extensions），主要用于辅助下载 PT 站的种子。 项…...
RMBG-1.4动态演示：AI净界处理长发人物的流畅抠图过程
RMBG-1.4动态演示：AI净界处理长发人物的流畅抠图过程 1. 引言：当抠图遇上飘逸长发 你有没有遇到过这样的烦恼？想给一张长发飘飘的人像照片换个背景，结果发现发丝边缘怎么都处理不干净，要么像被狗啃过一样参差不齐&am…...
OpenClaw任务编排技巧：Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF复杂流程分解策略
OpenClaw任务编排技巧：Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF复杂流程分解策略 1. 为什么需要任务编排 上周我尝试用OpenClaw自动完成一篇技术博客的写作和发布，结果遭遇了连环翻车：模型先花20分钟生成了偏离主题的初稿&…...
JavaWeb Listener 监听器详解：三大域对象监听 + 在线人数统计实战
前言Listener（监听器）是 JavaWeb 三大组件最后一个，专门用于监听 Web 域对象的创建、销毁、属性变化，在事件触发时自动执行逻辑。它是基于观察者模式实现，常用于：服务器初始化、在线用户统计、Session 监听…...
如何去选择品质优秀的段码屏厂家
在现代电子产品中，LCD液晶段码屏的应用越来越广泛。选择一家优质的厂家不仅能保证产品质量，还能提供高效的服务。本文将为您推荐十家在LCD液晶段码屏领域表现突出的厂家，帮助您做出明智的选择。1. 杭州斡能电子有限公司杭州斡能电子有限公司&…...
告别特征工程：用Python+Matplotlib把EEG脑电信号直接变成CNN能吃的时频图
从原始EEG到CNN输入：Python自动化生成时频图全流程解析 深夜的实验室里，显示器上跳动的脑电波形正被转化为一张张彩色图像——这不是科幻场景，而是现代脑机接口研究的日常。传统EEG分析中繁琐的特征工程正在被一种更直观的方法取代࿱…...