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