zxd's Blog

Appearance

Target ​

  1. 能够格式化日期对象
  2. 能够利用日期对象完成倒计时效果案例
  3. 能够创建和追加DOM节点
  4. 能够利用swiper插件制作一个移动端轮播图
  5. 能够跟随课堂代码完成学生信息表案例

💡🚀🤟👉👇☀️🍉🍍🍇🍓🥕🍭🎖️🎁☘️🍀💯🔆❗🔥🚩

bash
# 每日反馈如何写：
可以是搞笑的，励志的，但不能是抱怨的
- bad : 我觉得我太笨了，我人废了， 我不行了， 我要摆烂了。
- good : 今天进步了一点点， 明天继续努力，欧里给！
1. 可以是给自己加油打气的一句话
2. 可以是给大家加油鼓励的一句话
3. 可以是实名举报某位同学上课睡觉， 好让我关注到那位同学
4. 可以是每日知识点的总结。
5. 可以是某个知识点不是很理解， 直接在反馈中提出来，我会讲解一下。
6. 可以提出自己学习中出现的问题，我尽量解答...
7. 希望更多的同学参与到每日反馈中来，多多发言，这样我就能多关注到你。

1. 日期对象 ​

image-20220724024401769

1.1 实例化 ​

image-20220724024424537

Code 01 🚩 ​

js
// 实例化  new Date()
// 1. 得到当前时间 
const date = new Date()
console.log(date)
// 2. 指定时间
const date2 = new Date('2022-5-1 08:30:00')
console.log(date2)

1.2 时间对象方法 ​

image-20220724024755228

Code 02 🚩 ​

js
// 获得日期对象
const date = new Date()
// 使用里面的方法
console.log(date.getFullYear())
console.log(date.getMonth() + 1)  // 月份要 + 1
console.log(date.getDate())
console.log(date.getDay())  // 星期几

​

Eg.显示格式化时间 ​

image-20220724025208863

Code 03 🚩 ​

js
const div = document.querySelector('div')
function getMyDate() {
  const date = new Date()
  let h = date.getHours()
  let m = date.getMinutes()
  let s = date.getSeconds()
  h = h < 10 ? '0' + h : h
  m = m < 10 ? '0' + m : m
  s = s < 10 ? '0' + s : s
  return `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`
}

div.innerHTML = getMyDate()
setInterval(function () {
  div.innerHTML = getMyDate()
}, 1000)

Code 04 🚩 ​

时间的另一种写法

js
const div = document.querySelector('div')
// 得到日期对象
const date = new Date()
div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
setInterval(function () {
  const date = new Date()
  div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21

}, 1000)
// div.innerHTML = date.toLocaleDateString()  // 2022/4/1
// div.innerHTML = date.toLocaleTimeString()  // 2022/4/1

1.3 时间戳 ​

image-20220724025325267

三种方式获取 ​

image-20220724025609189

Code 05 🚩 ​

js
// 1. getTime()
const date = new Date()
console.log(date.getTime())
// 2. +new Date()
console.log(+new Date())
// 3. Date.now()
console.log(Date.now());

// 2. +new Date()
console.log(+new Date())
console.log('-----------------');
console.log(+new Date('2022-4-1 18:30:00'))

// 我要根据日期 Day()  0 ~ 6  返回的是 星期一
const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
// const date = new Date()
console.log(arr[new Date().getDay()])

1.4 总结 ​

image-20220724025815127

1.5 Eg.毕业倒计时效果 ​

image-20220724030054642

Code 06 🚩 ​

js
// 函数封装 getCountTime
function getCountTime() {
  // 1. 得到当前的时间戳
  const now = +new Date()
  // 2. 得到将来的时间戳
  const last = +new Date('2022-8-8 18:30:00')
  // console.log(now, last)
  // 3. 得到剩余的时间戳 count  记得转换为 秒数
  const count = (last - now) / 1000
  
  // console.log(count)
  // 4. 转换为时分秒
  // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
  // m = parseInt(总秒数 / 60 % 60);     //   计算分数
  // s = parseInt(总秒数 % 60);   
  // let d = parseInt(count / 60 / 60 / 24)               //   计算当前秒数
  let h = parseInt(count / 60 / 60 % 24)
  let m = parseInt(count / 60 % 60)
  let s = parseInt(count % 60)
 
  h = h < 10 ? '0' + h : h
  m = m < 10 ? '0' + m : m
  s = s < 10 ? '0' + s : s
  console.log(h, m, s)
  //  5. 把时分秒写到对应的盒子里面
  document.querySelector('#hour').innerHTML = h
  document.querySelector('#minutes').innerHTML = m
  document.querySelector('#scond').innerHTML = s
}
// 先调用一次
getCountTime()

// 开启定时器
setInterval(getCountTime, 1000)

2. 节点操作 ​

2.1 DOM节点 ​

image-20220724030822622

小结 ​

image-20220724030941996

查找节点 ​

image-20220724031205398

2.2 父节点 ​

image-20220724031313936

Code 07 🚩 ​

js
const baby = document.querySelector('.baby')
console.log(baby)  // 返回dom对象
console.log(baby.parentNode)  // 返回dom对象
console.log(baby.parentNode.parentNode)  // 返回dom对象

Code 08 🚩 ​

js
// 1. 获取事件源
const btn = document.querySelector('.box1')
// 2. 事件侦听
btn.addEventListener('click', function () {
  this.parentNode.style.display = 'none'
})

// 获取三个关闭按钮
const closeBtn = document.querySelectorAll('.box1')
for (let i = 0; i < closeBtn.length; i++) {
  closeBtn[i].addEventListener('click', function () {
    // 关闭我的爸爸 所以只关闭当前的父元素
    this.parentNode.style.display = 'none'
  })
}

// 2. 事件委托方式
const box = document.querySelector('.wrap')
box.addEventListener('click', function(e){
  if (e.target.className ==='box1') {
    e.target.parentNode.style.display = 'none'
  }
})

2.3 子节点 ​

image-20220724032252022

Code 09 🚩 ​

js
// Q：获取ul下的所有li标签  
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. node.childNodes 获取所有的子节点 包含 元素节点 文本节点等等
//  返回的也是一个集合，伪数组 
console.log(ul.childNodes)
console.log(ul.childNodes[0].nodeType)  // 3  文本节点
console.log(ul.childNodes[1].nodeType) //  1  元素节点
// 2. node.children 获取node下的所有的子元素节点
// 返回的是元素集合，伪数数组。
// 我们经常要操作的是元素节点  实际开发中 我们用这个 子元素节点 
// 如果获取它内部某个元素 , 加下标
console.log(ul.children);
// 2.1 获取第一个子元素节点
ul.children[0]
// 2.2 获取最后一个子元素节点
ul.children[ul.children.length - 1]

2.4 兄弟节点 ​

image-20220724032405589

  • 注意, 上面获取的准确来说, 是兄弟元素节点.

Code 09 🚩 ​

js
// 3. 兄弟元素节点
const li2 = document.querySelector('ul li:nth-child(2)')
// 重点记单词, 驼峰式的  previous 前一个的意思 Sibling 兄弟的意思
console.log(li2.previousElementSibling)  // 上一个兄弟元素节点
console.log(li2.nextElementSibling)  // 下一个兄弟元素节点

小结 ​

image-20220724032443340

2.5 创建节点 ​

image-20220724033624936

image-20220724033736845

2.6 添加节点 ​

image-20220724033755514

Code 10 🚩 ​

js
// 1. 创建节点
// const div = document.createElement('div')
// // console.log(div)
// 2. 追加节点  作为最后一个子元素
// document.body.appendChild(div)
const ul = document.querySelector('ul')
const li = document.createElement('li')
li.innerHTML = '我是li'
// ul.appendChild(li)
// ul.children
// 3. 追加节点
// insertBefore(插入的元素, 放到哪个元素的前面)
ul.insertBefore(li, ul.children[0])

Eg. 学成在线数据渲染 ​

image-20220724034013789

image-20220724034047766

js
        let data = [
            {
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]

Code Eg1 🚩 ​

js
const ul = document.querySelector('.box-bd ul')
// 1. 根据数据的个数，创建 对应的小li
for (let i = 0; i < data.length; i++) {
  // 2. 创建新的小li
  const li = document.createElement('li')
  // 把内容给li
  li.innerHTML = `
                <a href="#">
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </a>
            `
  // 3. ul追加小li
  ul.appendChild(li)
}

2.7 克隆节点 ​

image-20220724034331946

Code 11 🚩 ​

js
const ul = document.querySelector('ul')
// 1 克隆节点  元素.cloneNode(true)
// const li1 = ul.children[0].cloneNode(true)
// console.log(li1)
// 2. 追加
ul.appendChild(ul.children[0].cloneNode(true))

2.8 删除节点 ​

image-20220724034500573

Code 12 🚩 ​

html
<button>删除</button>
<ul>
  <li>熊大</li>
  <li>熊二</li>
  <li>光头强1</li>
  <li>光头强2</li>
  <li>光头强3</li>
  <li>光头强4</li>
</ul>

<ul>
    <li>
        <span>
            <button class="btn">删除</button>
        </span>
    </li>
</ul>
js
const ul = document.querySelector('ul')
// 删除节点  父元素.removeChlid(子元素)
ul.removeChild(ul.children[0])

3. 移动端事件 ​

3.1 触屏事件 touch ​

image-20220724034618883

Code 13 🚩 ​

js
// 在pc上模拟移动端事件，一定要切换成移动端的模式才可以!
// 获取元素
var div = document.querySelector('div');
// 1. touchstart: 手指触摸到DOM元素时触发
div.addEventListener('touchstart', function() {
  console.log('我触摸到了这个div----touchstart')
});
// 2. touchmove: 手指在DOM元素身上移动事件
div.addEventListener('touchmove', function() {
  console.log('我在这个dom元素上移动')
});
// 3. touchend: 手指在dom元素上离开时触发
div.addEventListener('touchend', function() {
  console.log('轻轻的我走了')
});

4. JS插件 ​

image-20220724034907181

Swiper相关 ​

下载 ​

使用方法 ​

Swiper配置 ​

js
var swiper = new Swiper(".mySwiper", {
  // 小圆点
  pagination: {
    el: ".swiper-pagination",
  },
  // 自动播放
  autoplay: {
    delay: 1000,//1秒切换一次
    disableOnInteraction: false,  // 鼠标点击 触摸之后，自动继续播放
  },
  // 可以键盘控制
  keyboard: {
    enabled: true,
    onlyInViewport: true,
  },
});

Eg.游乐园轮播图 ​

image-20220724034938106

  • 注意， 版本要对应！！

步骤 ​

  1. 先在官网找想要的效果， 找到序号
  2. 在本地demo中找到对应的文件
  3. 将本地demo中的css， js， html结构复制到我们自己的项目中
  4. 简单的修改和配置

css ​

html
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
	/* new */
    .swiper-pagination-bullet-active {
      background: pink;
    }
  </style>

html ​

html
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="./uploads/item_1.png" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="./uploads/item_2.png" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="./uploads/item_3.png" alt=""></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="./uploads/item_4.png" alt=""></a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

js ​

html
  <script src="./js/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: {
          delay: 3000,//3秒切换一次
        },
      });
  </script>

5. 综合案例 ​

image-20220724035044379

5.1 核心思路 ​

image-20220724035124509

image-20220724035200201

image-20220724035222247

image-20220724035233793

js
// 获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')

Code 🚩 ​

js
// 获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
// 获取所有带有name属性的 元素
const items = document.querySelectorAll('[name]')
// 声明一个空的数组， 增加和删除都是对这个数组进行操作
const arr = []

// 1. 录入模块
// 1.1 表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
  // 阻止默认行为  不跳转
  e.preventDefault()
  // console.log(11)

  // 这里进行表单验证  如果不通过，直接中断，不需要添加数据
  // 先遍历循环
  for (let i = 0; i < items.length; i++) {
    if (items[i].value === '') {
      return alert('输入内容不能为空')
    }
  }
  // 创建新的对象
  const obj = {
    stuId: arr.length + 1,
    uname: uname.value,
    age: age.value,
    gender: gender.value,
    salary: salary.value,
    city: city.value
  }
  // console.log(obj)
  // 追加给数组里面
  arr.push(obj)
  // console.log(arr)
  // 清空表单  重置 
  this.reset()
  // 调用渲染函数
  render()
})


// 2. 渲染函数 因为增加和删除都需要渲染
function render() {
  // 先清空tbody 以前的行 ，把最新数组里面的数据渲染完毕 
  tbody.innerHTML = ''
  // 遍历arr数组
  for (let i = 0; i < arr.length; i++) {
    // 生成 tr 
    const tr = document.createElement('tr')
    tr.innerHTML = `
          <td>${arr[i].stuId}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
    // 追加元素  父元素.appendChild(子元素)
    tbody.appendChild(tr)
  }
}


// 3. 删除操作
// 3.1 事件委托 tbody
tbody.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    // 得到当前元素的自定义属性 data-id
    // console.log(e.target.dataset.id)
    // 删除arr 数组里面对应的数据
    arr.splice(e.target.dataset.id, 1)
    console.log(arr)
    // 从新渲染一次
    render()
  }
})