JavaScript应用（day04:日期对象、节点对象）

我是如此相信ᯤ⁶⁶ᴳ

已于 2023-12-17 11:36:07 修改

阅读量541

点赞数 15

分类专栏： JavaScript应用文章标签： javascript 前端开发语言

于 2023-12-17 00:49:49 首次发布

本文链接：https://blog.csdn.net/weixin_51591826/article/details/135040322

版权

JavaScript应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的日期对象使用、时间戳获取、DOM节点操作（包括父节点、子节点、兄弟节点和节点创建/删除），以及M端事件处理和Swiper插件的基础应用。通过实例演示了如何动态显示时间、实现倒计时和操作HTML元素。

摘要由CSDN通过智能技术生成

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、日期对象

日期对象：用来表示时间的对象

作用：可以得到当前系统时间

1.实例化

2.日期对象方法

注：toLocaleString()方法可以直接返回格式化的日期，例如：2023/11/21 09:51:12

案例（页面显示时间）

    let getDate = function () {
      // 1.实例化时间
      const date = new Date()
      // 2.补零
      // 月份补零
      const month = date.getMonth() + 1 < 10 ? date.getMonth() + 1 + '0' : date.getMonth() + 1
      // 日期补零
      const dates = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      // 小时补零
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      // 分钟补零
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // 秒补零
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return `${date.getFullYear()}-${month}-${dates} ${hours}:${minutes}:${seconds}`
    }
    // 3.获取元素, 并进行填充
    const span = document.querySelector("span")
    span.innerHTML = getDate()
    setInterval(function () { span.innerHTML = getDate() }, 1000)

3.时间戳

三种方式获取时间戳

总结

案例（毕业生倒数时效果）

    const countdown = document.querySelector(".countdown")
    function getRandomColor(flag) {
      if (flag) {
        // 如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色
        let str = "#"
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 0; i < 6; i++) {
          str = str + arr[Math.floor(Math.random() * arr.length)]
        }
        return str
      } else {
        // 如果参数传递的是false,则输出一个随机rgb的颜色 
        let random_r = Math.floor(Math.random() * 256)
        let random_b = Math.floor(Math.random() * 256)
        let random_g = Math.floor(Math.random() * 256)
        return `rgb(${random_r},${random_b},${random_g})`
      }
    }
    countdown.style.backgroundColor = getRandomColor(true)
    // 1.获取元素
    const next = document.querySelector(".next")
    const hour = document.querySelector("#hour")
    const minutes = document.querySelector("#minutes")
    const second = document.querySelector("#scond")
    // 2.通过日期实例化对上面的标题时间进行修改
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    next.innerHTML = `今天是${year}年${month}月${day}日`
    // 3.根据时间戳获取倒计时
    let getCountDown = function () {
      // 3.1获取现在的时间戳
      let oldDate = +new Date()
      // 3.2获取未来的时间戳
      let newDate = +new Date(2023, 11, 23, 18, 30, 0)
      let total = (newDate - oldDate) / 1000
      d = parseInt(total / 60 / 60 / 24)//计算天数
      h = parseInt(total / 60 / 60 % 24)//计算小时
      m = parseInt(total / 60 % 60)//计算分数
      s = parseInt(total % 60)//计算当前秒数
      hour.innerHTML = h < 10 ? '0' + h : h
      minutes.innerHTML = m < 10 ? '0' + m : m
      second.innerHTML = s < 10 ? '0' + s : s
    }
    getCountDown()
    setInterval(getCountDown, 1000)

二、节点对象

1.DOM节点

元素节点、属性节点、文本节点

总结

2.查找节点

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

父节点、子节点、兄弟节点

1.父节点查找

返回最近一级父节点（亲爸爸）

案例（关闭二维码案例）

  // 京东点击关闭顶部广告
    // 1.获取元素
    const btn = document.querySelector("button")
    // 2.绑定点击事件
    btn.addEventListener("click", function () {
      this.parentNode.style.display = "none"
    })

2.子节点查找

children返回的是一个伪数组，选择的是亲儿子（如果子元素里面还有内容，也会带过来）

3.兄弟关系查找

总结

3.增加节点

步骤：

①创建一个新的节点

②把创建的新的节点放入到指定的元素内部

1.创建节点

2.追加节点

案例（学成在线）

3.克隆节点

4.删除节点

删除元素必须通过父元素删除

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

三、M端事件（移动端）

四、JS插件（swiper）

插件的基本使用：

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

案例（游乐园轮播图）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper.min.css" />

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

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

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/b01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b03.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b04.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b05.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b06.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b07.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b08.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/b09.jpg" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
      autoplay: {
        // 轮播速度
        delay: 500,
        // 是否停在最后一张幻灯片上
        stopOnLastSlide: false,
        // 开启此功能，鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    swiper.el.onmouseover = function () {
      swiper.autoplay.stop();
    }
    swiper.el.onmouseout = function () {
      swiper.autoplay.start();
    }
  </script>
</body>

</html>

案例（学生信息表）

    // 录入，获取用户输入的数据，并渲染到页面上
    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 info = document.querySelector(".info")
    const tbody = document.querySelector("tbody")
    const val = document.querySelectorAll("type[name]")
    // 定义一个数组，增删都是对于这个数组进行操作
    const data = []

    // 表单提交事件
    info.addEventListener("submit", function (e) {
      //阻止默认行为，不跳转
      e.preventDefault()
      // 判断用户输入的数据是否完整，不完整则提示请填写完整数据
      if (uname.value != "" && age.value != "" && gender.value != "" && salary.value != "" && city.value != "") {
        // 将用户输入的数据存储到数组当中去
        let students = {
          Id: data.length + 1,
          name: uname.value,
          age: age.value,
          gender: gender.value,
          salary: salary.value,
          city: city.value,
        }
        data.push(students)
        // 表单重置
        this.reset()
        // 渲染数据
        render()
      } else {
        return alert("填写完整数据")
      }
    })

    // 渲染数据
    function render() {
      // 每次进行渲染的时候要先清楚tbody里面的内容，防止重复
      tbody.innerHTML = ''
      for (let i = 0; i < data.length; i++) {
        const tr = document.createElement("tr")
        tr.innerHTML = `
          <td>${data[i].Id}</td >
          <td>${data[i].name}</td >
          <td>${data[i].age}</td>
          <td>${data[i].gender}</td>
          <td>${data[i].salary}</td>
          <td>${data[i].city}</td>
          <td>
            <a href="javascript:" data-delId=${i}>删除</a>
          </td>
        `
        tbody.appendChild(tr)
      }
    }

    // 删除数据
    // 事件委托
    tbody.addEventListener("click", function (e) {
      // 判断是否点击的是删除，如果是根据删除的索引号对数据进行删除，再重新渲染
      if (e.target.tagName === "A") {
        data.splice(e.target.dataset.delid, 1)
        render()
      }
    })