日期对象和节点操作及M端事件

日期对象是用来表示时间的对象，可以得到当前系统时间让网页显示日期。

日期对象

实例化

在代码中发现了new关键字时，一般将这个操作称为实例化。

// 实例化
// 1. 当前时间
const date = new Date()
console.log(date)

// 2. 指定时间
const date1 = new Date('2023-6-1 06:30:00')
console.log(date1)

日期对象方法

因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式。

方法	作用	说明
`getFullYear()`	获得年份	获取四位年份
`getMonth()`	获得月份	取值为 0~11
`getDate()`	获取月份中的每一天	不同月份取值也不相同
`getDay()`	获取星期	取值为 0~6
`getHours()`	获取小时	取值为0~23
`getMinutes()`	获取分钟	取值为 0~59
`getSeconds()`	获取秒	取值为 0~59

// 1.获取时间对像
const date = new Date()
// 2. 使用里面的方法
console.log(date.getFullYear())  //2024（年）
console.log(date.getMonth() + 1) // 8  （月）
console.log(date.getDay())       // 3  （星期）
console.log(date.getHours())    //  18 （时）
console.log(date.getMinutes())  //  24  (分)
console.log(date.getSeconds())  //  12  (秒)

实例：页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08

简单版 Demo

const div = document.querySelector('div')
const date = new Date()
div.innerHTML = date.toLocaleString()
setInterval(function () {
  div.innerHTML = date.toLocaleString()  //  2024/8/21 18:55:05
}, 1000)
// div.innerHTML = date.toLocaleDateString() //  2024/8/21
// div.innerHTML = date.toLocaleTimeString() //  18:58:09

完美版 Demo

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.getDay()}号 ${h}:${m}:${s}`
}
// 定时器刚开始是空的，所以外面也写一个
div.innerHTML = getMyDate()
setInterval(function () {
  div.innerHTML = getMyDate()
}, 1000)

时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成。

算法：

将来的时间戳 – 现在的时间戳= 剩余时间毫秒数

“剩余时间毫秒数“ 转换为剩余时间的”年月日时分秒“ 就是”倒计时时间“

比如：将来时间戳2000ms - 现在时间戳1000ms = 1000ms

1000ms转换为就是0小时0分1秒

三种方式获取时间戳

+new Date() getTime() Date.now()

//+new Date()
console.log(+new Date())

//2. getTime()
const date = new Date()
console.log(date.getTime())

//3. Date.now()
console.log(Date.now())

+new Date() 无需实例化非常推荐，Date.now() 只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳。

// 指定时间戳
console.log(+new Date('2023-5-4 16:30:20'))

获取星期几的方法

// 获取星期几的方法
const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()])

案例：毕业倒计时效果

需求：计算到下课还有多少时间 Demo

分析：

① 用将来时间减去现在时间就是剩余的时间

② 核心：使用将来的时间戳减去现在的时间戳

③ 把剩余的时间转换为天时分

④ 时间戳得到是毫秒，需要转换为秒在计算。

// 第一模块 函数封装，计算时间戳转换时分秒放在盒子里
function getCountTime() {
  // 1. 得到当前的时间戳
  const now = +new Date()
  // 2. 得到将来的时间戳
  const last = +new Date('2024-8-30 23:05:00')
  // 3. 得到剩余的时间戳 ,记着转换为秒数
  const count = (last - now) / 1000

  // 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)
  h = h < 10 ? '0' + h : h
  let m = parseInt(count / 60 % 60)
  m = m < 10 ? '0' + m : m
  let s = parseInt(count % 60)
  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) // 开启定时器

// 第三模块  自定义一个随机颜色函数
function getRandomColor(flag = true) {
  if (flag) {
    //如果是true 则返回 #ffffff
    let str = '#'
    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    // 利用for循环随机抽6次 累加到 str里面
    for (let i = 1; i <= 6; i++) {
      // 每次要随机从数组里面抽取一个  
      // random 是数组的索引号 是随机的
      let random = Math.floor(Math.random() * arr.length)
      // str = str + arr[random]
      str += arr[random]
    }
    return str

  } else {
    // 4. 否则是 false 则返回 rgb(255,255,255)
    let r = Math.floor(Math.random() * 256)  // 55
    let g = Math.floor(Math.random() * 256)  // 89
    let b = Math.floor(Math.random() * 256)  // 255
    return `rgb(${r},${g},${b})`
  }

}
// 页面刷新随机得到颜色
const countdown = document.querySelector('.countdown')
countdown.style.backgroundColor = getRandomColor()

节点操作

DOM树里每一个内容都称之为节点，节点类型包含元素节点（标签）；属性节点（链接）；文本节点和其他。

父节点查找

节点关系是针对的找亲戚返回的都是对象。

parentNode属性，返回最近一级的父节点找不到返回为null.

const bady = document.querySelector('.bady')
// 返回dom对象
console.log(bady)
//div.dad对象 返回最近一级的父节点
console.log(bady.parentNode)
// div.yeye对象 爸爸的爸爸又上一层
console.log(bady.parentNode.parentNode)

案例：关闭二维码

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

关闭按钮和erweima是什么关系呢？

父子关系，所以点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了。

关闭一个合资 Demo

// 1. 获取事件源
const box1 = document.querySelector('.box1')

// 2. 事件监听
box1.addEventListener('click', function () {
  this.parentNode.style.display = 'none'
})

关闭三个盒子 Demo

// 1. 获取三个关闭按钮
const clostBtn = document.querySelectorAll('.box1')
for (let i = 0; i < clostBtn.length; i++) {
  clostBtn[i].addEventListener('click', function () {
    // 等于box1的爸爸隐藏
    this.parentNode.style.display = 'none'
  })
}

子节点查找

children 属性标签，仅获得所有元素节点，返回的还是一个伪数组 Demo

childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 不仅仅获得孩子，还获取孩子的所有的内容

// 获取ul里面5个小li
const ul = document.querySelector('ul')
console.log(ul.children) // 得到伪数组 选择的是最近一级的亲儿子

兄弟节点查找

Demo

const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling) // 上一个兄弟
console.log(li2.nextElementSibling)     // 下一个兄弟

增加节点

很多情况下，我们需要在页面中增加元素，比如：点击发布按钮，可以新增一条信息。

分两部：

创造节点：

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

追加节点：

要想在界面看到，还得插入到某个父元素中

// 1. 创建节点
const div = document.createElement('div')
// console.log(div)
document.body.appendChild(div) //插入到父元素的最后一个子元素

const ul = document.querySelector('ul')

// 1. 创建节点
const li = document.createElement('li')
// 给li增加内容
li.innerHTML = '我是li'

// 2.1 追加节点 作为最后一个子元素
ul.appendChild(li)

// 2.2 追加节点到最前面（第一孩子ul.children[0]）
//insertBefore(插入元素, 放在哪个元素的前面)
ul.insertBefore(li, ul.children[0])

案例：学成在线渲染

分析：Demo

①：准备好空的ul结构

②：根据数据的个数，创建一个新的空li

③：li里面添加内容img标题等

④：追加给ul

// 1. 重构  
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
  },
]
const ul = document.querySelector('ul')

// 2. 根据数据的个数，创建对应的小li
for (let i = 0; i < data.length; i++) {
  // 2. 创建新的小li
  const li = document.createElement('li')
  // 把内容给xiaoli
  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. 新小li追加到ul里面
  ul.appendChild(li)
}

克隆节点

如果cloneNode() 括号里面是true 则深克隆，把里面内容也拿过来；false 只克隆一个标签。

const ul = document.querySelector('ul')
// 1. 克隆第一个小li节点  元素cloneNode(true)
// const li1 = ul.children[0].cloneNode(true)

// 2. 追加到<ul>最后面
ul.appendChild(ul.children[0].cloneNode(true))

删除节点

在JavaScript 原生DOM操作中，要删除元素必须通过父元素删除，如不存在父子关系则删除不成功。

删除节点和隐藏节点display:none有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点。

const ul = document.querySelector('ul')
// 删除节点
ul.removeChild(ul.children[0])

M端事件

移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和IOS都有。

touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

触屏事件	说明
`touchstart`	手指触摸到一个 DOM 元素时触发
`touchmove`	手指在一个 DOM 元素上滑动时触发
`touchend`	手指从一个 DOM 元素上移开时触发

const div = document.querySelector('div')
// 1. 触摸
div.addEventListener('touchstart', function () {
  console.log('开始摸我')
})

// 2. 离开了
div.addEventListener('touchend', function () {
  console.log('离开了')
})

// 3. 移动
div.addEventListener('touchmove', function () {
  console.log('一直模，移动')
})

JS插件

插件就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果。

学习插件的基本过程：

Swiper中文网：了解这个插件可以完成什么需求 https://www.swiper.com.cn/

Swiper演示：找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html

Swiper使用方法：查看基本使用流程 https://www.swiper.com.cn/usage/index.html

中文API文档：查看，去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意：多个swiper同时使用的时候，类名需要注意区分

下载Swiper
引用css和js文件
选择Demo代开网页源代码复制粘贴
API 完成个性化定制，粘贴在初始化<script>

综合案例：学生信息表

本次案例尽量减少dom操作，采取操作数据的形式增加和删除都是针对于数组的操作，然后根据数组数据渲染页面。

业务模块：Demo

① 点击录入按钮可以录入数据

② 点击删除可以删除当前的数据

核心思路：

① 声明一个空的数组
② 点击录入，根据相关数据，生成对象，追加到数组里面

首先取消表单默认提交事件

创建新的对象，里面存储表单获取过来的数据，格式如右图

追加给数组

渲染数据。遍历数组，动态生成tr，里面填写对应td数据，并追加给 tbody

重置表单

注意防止多次生成多条数据，先清空 tbody

③ 根据数组数据渲染页面-表格的行
④ 点击删除按钮，删除的是对应数组里面的数据
⑤ 再次根据数组的数据，渲染页面

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) {
  // 阻止默认行为,阻止form提交跳转
  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)
  // 清空表单(重置表单)
  this.reset()
  // 调用渲染函数
  render()
})

// 2. 渲染函数
function render() {
  // 先清空tbody,以前的行，把最新数组里面的数据渲染完毕
  tbody.innerHTML = ''
  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>
    `
    // 追加元素
    tbody.appendChild(tr)
  }
}

// 3. 删除操作
// 3.1 事件委托
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()
  }
})

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/125.html