JS-WebAPIS(四)

日期对象（常用）

• 实例化

• 在代码中发现了 new 关键字时，一般将这个操作称为实例化
• 创建一个时间对象并获取时间

• 获得当前时间

• 获得指定时间 

• 时间对象方法

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

• 时间戳

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

什么是时间戳？

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

算法：

• 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
• 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
• 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
• 1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳：

• 使用 getTime() 方法

• 简写 +new Date()

• 使用 Date.now() 

案例：倒计时案例

 需求：计算到下课还有多少时间
分析：
①：用将来时间减去现在时间就是剩余的时间
②：核心： 使用将来的时间戳减去现在的时间戳
③：把剩余的时间转换为 天 时 分 秒

注意：
1. 通过时间戳得到是毫秒，需要转换为秒在计算
2. 转换公式：

• d = parseInt(总秒数/ 60/60 /24); // 计算天数
• h = parseInt(总秒数/ 60/60 %24) // 计算小时
• m = parseInt(总秒数 /60 %60 ); // 计算分数
• s = parseInt(总秒数%60); // 计算当前秒数

  
  
  
  
  


  

    
今天是2024年2月22日
    
过年倒计时
    

      22天22: 22: 22
    
    
2024.2.9过年
  

  

 

---

节点操作（常用）

• DOM 节点

DOM树里每一个内容都称之为节点

• 节点类型（）

 总结：

1. 什么是DOM 节点？

•  DOM树里每一个内容都称之为节点

2. DOM节点的分类？

•  元素节点 比如 div标签
•  属性节点 比如 class属性
•  文本节点 比如标签里面的文字

3. 我们重点记住那个节点？

•  元素节点
•  可以更好的让我们理清标签元素之间的关系

• 查找节点

父节点查找：

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

子节点查找： 

• childNodes

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

• children 属性 （重点）

1. 仅获得所有元素节点（只获取html标签）
2. 返回的还是一个伪数组

兄弟节点查找： 

1. 下一个兄弟节点

• nextElementSibling 属性

2. 上一个兄弟节点

• previousElementSibling 属性

• 增加节点（重点）

场景：

 

1.创建节点

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

 2.追加节点

• 要想在界面看到，还得插入到某个父元素中
• 插入到父元素的最后一个子元素:

• 插入到父元素中某个子元素的前面 

 

• 删除节点

• 若一个节点在页面中已不需要时，可以删除它
• 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
• 语法

注：

•  如不存在父子关系则删除不成功
• 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点 

M端事件（移动端）

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

• 触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
• touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔 ）对屏幕或者触控板操作。
• 常见的触屏事件如下：

JS插件（swiper）

• 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
• 学习插件的基本过程
• 熟悉官网,了解这个插件可以完成什么需求           https://www.swiper.com.cn/
• 看在线演示,找到符合自己需求的demo                https://www.swiper.com.cn/demo/index.html
• 查看基本使用流程                                                https://www.swiper.com.cn/usage/index.html
• 查看APi文档,去配置自己的插件                           https://www.swiper.com.cn/api/index.html
• 注意: 多个swiper同时使用的时候, 类名需要注意区分

在官网下载后，从这个package夹中找到css和js文件，引入到项目中就可以用了，具体看文档

综合案例

学生信息表案例

说明：

本次案例，我们尽量减少dom操作，采取操作数据的形式

增加和删除都是针对于数组的操作，然后根据数组数据渲染页面

核心思路：
①： 声明一个空的数组
②： 点击录入，根据相关数据，生成对象，追加到数组里面
③： 根据数组数据渲染页面-表格的 行
④： 点击删除按钮，删除的是对应数组里面的数据
⑤： 再次根据数组的数据，渲染页面

  
  
  
  
  



  
新增学员
  

    姓名：
    年龄：
    性别:
    
      男
      女
    
    薪资：
    就业城市：
      北京
      上海
      广州
      深圳
      曹县
    
    录入
  

  
就业榜
  

    

      

        
学号
        
姓名
        
年龄
        
性别
        
薪资
        
就业城市
        
操作