当前位置：首页 > article >正文

Web APIs 4：日期对象、时间戳、节点操作、swiper插件

article 2024/11/20 6:19:08

Web APIs 4（日期对象、节点操作、swiper插件）

1.实例化日期对象

获得当前时间：const date = new Date()
获得指定时间：const data = new Date(‘2024-1-1 08:30:30’)

2.日期对象方法

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

单个获取日期实现自定义格式：

<body>
  <div></div>
  <script>
    function getMyDate() {
      const date = new Date()
      console.log(date);
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return `今天是：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${h}:${m}:${s} 星期${date.getDay()}`
    }
    const div = document.querySelector('div')
    div.innerHTML = getMyDate()  //使第一秒不是空白
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)
  </script>
</body>

使用toLocaleString()方法格式显示：

 <script>
    const div = document.querySelector('div')
    const date = new Date()
    div.innerHTML = date.toLocaleDateString() //2024/925
    div.innerHTML = date.toLocaleString() //2024/9/25 15:47:25
  </script>

3.时间戳

概念：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
使用场景：倒计时效果
将来的时间戳-现在的时间戳=剩余时间的毫秒数（转换为时间的年月日时分秒就是倒计时时间）
获取时间戳方法：
- getTime()方法：需要先实例化
- +new Date()方法：常用
- Date.now()方法：只能得到当前的时间戳

 <script>
    //第一种方法
    const date = new Date('2024-1-1 08:30:30')
    console.log(date.getTime())
    //第二种方法
    console.log(+new Date('2024-1-1 08:30:30'))
    //第三种方法
    console.log(Date.now())
  </script>

案例：倒计时

<body>
  <div class="countdown">
    <p class="next">今天是2222年2月22日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
    const date = new Date()
    const next = document.querySelector('.next')
    next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    function getCountTime() {
      //当前时间戳
      const now = +new Date()
      console.log(now)
      //将来时间戳
      const last = +new Date('2024-9-26 18:30:00')
      //剩余时间戳
      const time = (last - now) / 1000
      //获取时分秒
      let h = parseInt(time / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(time / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      //写到对应盒子
      const hour = document.querySelector('#hour')
      const min = document.querySelector('#minutes')
      const sec = document.querySelector('#scond')
      hour.innerHTML = h
      min.innerHTML = m
      sec.innerHTML = s
    }
    //先调用一次,防止最开始的空白
    getCountTime()
    //定时器函数不要加小括号
    setInterval(getCountTime, 1000)
    // 随机颜色函数
    // 1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是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()
  </script>
</body>

4.节点操作（针对元素节点）

DOM节点：DOM树中的每一个内容
节点类型：
- 元素节点：所有的标签，eg：body、div
- 属性节点：所有的属性，eg：href
- 文本节点：所有文本
节点关系
- 父节点
- 子节点
- 兄弟节点
查找节点：（通过节点间关系）：不用多次使用querySelector()去获取节点
- 父节点：子元素.parentNode（最近一级）
- 子节点：
  - 父元素.childNodes：获取所有子节点，包括文本、注释等
  - children(重点)：仅获取所有元素节点，返回伪数组
- 兄弟节点：
  - 下一个兄弟节点：nextElementSibling属性
  - 上一个兄弟节点：previousElementSibling属性

增加节点

创建节点：

document.createElement(‘标签名’)

追加节点：

//插入到这个父元素的最后
    父元素.appendChild(要插入的元素)
//插入到父元素中某个子元素的前面
    父元素.insertBefore(要插入的元素, 在哪个元素前面)

<body>
  <ul>
    <li>我是第一个</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    //创建节点
    const li2 = document.createElement('li')
    li2.innerHTML = '我是第二个'
    //将li2插入ul的最后
    ul.appendChild(li2)
    //创建节点
    const lim = document.createElement('li')
    lim.innerHTML = '我在第一个和第二个之间'
    //将lim节点插到li2的前面
    ul.insertBefore(lim, li2)
  </script>
</body>

克隆节点：元素.cloneNode(布尔值)
- true：克隆包含后代节点一起克隆
- false：克隆不包含后代节点，默认为false

删除节点：必须通过父元素删除

父元素.removeChild(要删除的元素)

<body>
  <ul>
    <li></li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    ul.removeChild(ul.children[0])
  </script>
</body>

5.M端（移动端）事件：触摸事件

touchstart：手指触摸到
touchmove：手指滑动
touchend：手指移开

6.swiper插件

纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
操作步骤：
- 进入swiper官网
- 下载插件
- 根据官网使用方法导入.css和.js文件
- 在官网查看演示视频，并在新窗口点击查看源码进行复制
- 根据API文档添加想要的效果

案例：轮播图

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./swiper-bundle.min.css">
  <style>
    .box {
      position: relative;
      margin: 100px auto;
      width: 600px;
      height: 300px;
      background-color: pink;
    }

    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;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

  </div>
  <script src="./swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      loop: true,
      pagination: {
        el: ".swiper-pagination",
      },
      autoplay: {
        delay: 1000,//1秒切换一次
        pauseOnMouseEnter: true,
      },
    });
  </script>
</body>

</html>