js第九天笔记

1. 日期对象

1. 实例化

1. 语法：const date = new Date(),获得当前时间
2. 指定时间：const date = new Date('2022-2-23')

2. 日期对象方法

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

        // 显示格式化时间
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const date1 = date.getDate()
        const hour = date.getHours() + 1
        const minute = date.getMinutes() + 1
        // console.log(month)
        document.write('当前的时间为：' + year + '-' + month + '-' + date1 + ' ' + hour + ':' + minute)

        // 简单写法
        const date = new Date()
        document.write(date.toLocaleString())

3. 时间戳(倒计时)

1. 含义：指时间零点至现在的毫秒数
2. 获得方法
   1. getTime()方法
   2. +new Date()方法
   3. Date.now()方法===无需实例化，只能得到现在的时间戳，不能指定时间

    // 封装倒计时函数
    function getTime() {
      // 获取当前的时间戳
    const now = +new Date()
    // 获取今晚的时间戳
    const last = +new Date('2023-3-17 00:00:00')
    // 相减，求剩余时间戳的秒数
    const count = (last - now) / 1000

    // 转化为时分秒
    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

    // 将时分秒写进去
    // 获取元素
    document.querySelector('#hour').innerHTML = h
    document.querySelector('#minutes').innerHTML = m
    document.querySelector('#scond').innerHTML = s
    }
    getTime()
    //设置定时器
    setInterval(getTime,1000)

2. 节点操作

1. DOM节点

1. 节点类型
   1. 元素节点
   2. 属性节点
   3. 文本节点

2. 查找节点

1. 父节点查找(子节点.parentNode),返回DOM对象

// 关闭广告
    // 获取三个关闭按钮
    const box1s = document.querySelectorAll('.box1')
    // for循环添加事件
    for(let i = 0; i < box1s.length; i++){
      box1s[i].addEventListener('click', function() {
        this.parentNode.style.display = 'none'
      })
    }

2. 子节点查找(父节点.children),仅获得元素节点，返回伪数组

3. 兄弟关系查找

   1. 下一个兄弟节点(nextElementSibling)
   2. 上一个兄弟节点(previousElementSibling)

3. 增加节点

1. 创建节点===document.createElement('标签')
2. 追加节点

    <ul>
        <li>牛逼</li>
    </ul>
    <script>
        const li = document.createElement('li')
        const ul = document.querySelector('ul')
        li.innerHTML = 'woshi'
        ul.appendChild(li)//追加在最后面
        ul.insertBefore(li,ul.children[0])//选择位置，然后追加在其之前
    </script>

        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)
        }

4. 克隆节点(true为克隆节点及文本，默认false只克隆节点)

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        ul.appendChild(ul.children[0].cloneNode(true))
        ul.appendChild(ul.children[1].cloneNode(true))
    </script>

5. 删除节点(父节点.removeChlid(子元素))

3. M端事件

1. touchstart,开始触摸
2. touchend，触摸结束
3. tuochmove，一直触摸

js插件swiper

1. 官网：https://www.swiper.com.cn/
2. 在线演示中查找自己想要的效果，中文教程中查找使用方法，api文档中个性化设置自己的效果

学生信息表案例

    // 获取元素
    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')
    

    // 声明一个空数组
    const arr = []

    // 表单提交事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function(e) {
      // 阻止表单默认提交
      e.preventDefault()

      // 表单不能为空
      //获取具有name属性的表单
      const item = document.querySelectorAll('[name]')
      // 判断非空
      for(let i = 0; i < item.length; i++){
        if(item[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,
      }
      arr.push(obj)
      // 清空表单
      info.reset()
      // 调用渲染函数
      draw()
    })

    // 渲染函数
    function draw() {
      // 先清空数组
      tbody.innerHTML = ''
      // 渲染
      for(let i = 0; i < arr.length; i++){
        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)
      }
      
    }

    // 删除操作,事件委托
    tbody.addEventListener('click', function(e) {
      if(e.target.tagName === 'A'){
        arr.splice(e.target.dataset.id, 1)
      }
      // console.log(arr)
      draw()
    })