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">01div>
      <div class="child-item child-color-2">02div>
      <div class="child-item child-color-3">03div>
      <div class="child-item child-color-4">04div>
      <div class="child-item child-color-5">05div>
    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">01div>
      <div class="child-item child-color-2">02div>
      <div class="child-item child-color-3">03div>
      <div class="child-item child-color-4">04div>
      <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总结,没发布

你可能感兴趣的:(重返学习,学习,git,javascript)