网站导航
> 文章列表 > 20230411----重返学习-网易云音乐首页案例-git远程仓库

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

网友: 文章列表 2024-03-21 21:33:59

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总结，没发布
网络标签：

相关问题