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【三】运行时私有区域之虚拟机栈…...
Linux存储管理：块设备与分区表的本质区别及实践指南
1. 项目概述：一次关于存储本质的深度对话“我不是表，我是块设备”——这个标题乍一看有点哲学意味，像是在为某个被误解的实体正名。在Linux的世界里，这恰恰揭示了存储管理中一个最核心、也最容易被混淆的概念关系：分区…...
标签系统的底层同步拓扑：大批量客户标签异步更新的一致性方案
标签（Tag）是私域精细化运营的灵魂。在进行大规模广告投放、或者老客清洗时，企业系统经常需要同时为上万个外部客户批量追加或清空标签。 1. 标签同步的复杂性在哪里？ 原生设计中，企业微信的标签是以“企业标签组&#…...
B站视频下载神器：如何优雅地将Bilibili内容保存到本地
B站视频下载神器：如何优雅地将Bilibili内容保存到本地 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/b…...
NewJob智能识别插件：求职时间管理的终极解决方案
NewJob智能识别插件：求职时间管理的终极解决方案 【免费下载链接】NewJob 一眼看出该职位最后修改时间，绿色为2周之内，暗橙色为1.5个月之内，红色为1.5个月以上 项目地址: https://gitcode.com/GitHub_Trending/ne/NewJob 在…...
告别论文 “双杀” 困局：okbiye 如何用一套闭环方案，破解重复率与 AIGC 检测双重难题
okbiye-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AI PPT降重复率 - Okbiye智能写作https://www.okbiye.com/reduceAIGC 当你对着导师的红笔批注，第三次修改论文时，有没有想过一个问题：为什么你改了又改的句子，重…...
为Cursor IDE定制AI代码生成规则：打造波士顿动力级精准开发助手
1. 项目概述：一个为Cursor定制的波士顿动力风格代码生成器如果你和我一样，每天都在和代码编辑器打交道，尤其是深度使用Cursor这款AI驱动的IDE，那你一定对“如何让AI更懂我”这件事有执念。Cursor自带的代码补全和生成能力已经很强…...
Taotoken稳定直连与路由策略保障了我的线上服务SLA
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 Taotoken稳定直连与路由策略保障了我的线上服务SLA 将线上服务的AI功能迁移到一个新的平台，首要的考量往往是稳定性。当…...
从‘秦皇岛今天晴空万里’到HMM：一文搞懂NLP分词中的序列标注到底在标什么
从天气报告到智能分词：解码序列标注在NLP中的魔法 秦皇岛的晴空万里不仅是气象术语，更是理解自然语言处理(NLP)中序列标注技术的绝佳入口。当我们看到"秦皇岛今天晴空万里"这行文字时，人脑能瞬间将其分解为有意义的词汇单元&#x…...
抠图软件在线使用有哪些？2026年最全对比测试，找到适合你的工具
最近被问得最多的问题就是："有没有特别好用的抠图软件？"说实话，这两年AI技术的发展真的改变了抠图这件事儿。我自己也用过不少抠图工具，从专业的PS到各种在线应用，今天就来好好聊聊抠图软件在线使用有哪些选…...
数据质量管理的过去、现在与未来：理解 2024 年数据测试、监控与数据可观察性
原文：towardsdatascience.com/the-past-present-and-future-of-data-quality-management-understanding-testing-monitoring-and-efd1350457eb?sourcecollection_archive---------1-----------------------#2024-05-25 数据领域正在发展，数据质量管理也…...