Web API 第四天

日期对象

实例化

在代码中使用new关键字时，一般这个操作为实例化

创建一个时间对象并获取时间

获得当前时间

const date = new Date()
console.log(date)

获得指定时间

const date = new Date('2008-8-8')
console.log(date)

日期对象方法

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

const date = new Date()
// 使用里面的方法
console.log(date.getFullYear())
// 月份要 + 1
console.log(date.getMonth() + 1)
console.log(date.getDate())
// 星期几
const days = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(days[new Date().getDay()]

案例：显示格式化的时间

页面先调用一次getMyDate()，再打开计时器

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      // 三元运算符 补0
      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.getDate()}号 ${h}:${m}:${s}`
    }

    div.innerHTML = getMyDate()
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)
  </script>
</body>

案例：时间的另一种写法——简单显示时间

new Date().toLocaleString()
new Date().toLocaleDateString()
new Date().toLocaleTimeString()

const div = document.querySelector('div')
// 得到日期对象
const date = new Date()
setInterval(function () {
  const date = new Date()
  // div.innerHTML = date.toLocaleString()
  // // 2022/4/1 09:41:21
  
  // 还可以转换为12小时制
  div.innerHTML = date.toLocaleString('chinese',{hour12:true})
  // 2022/4/1 上午9:41:21
  // div.innerHTML = date.toLocaleString('eng',{hour12:true})
}, 1000)
// div.innerHTML = date.toLocaleDateString()  // 2022/4/1
// div.innerHTML = date.toLocaleTimeString()  // 2022/4/1

时间戳

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

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
算法：
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
- 比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
- 1000ms 转换为就是 0小时0分1秒
获得时间戳三种方法
- getTime()
```
const date = new Date()
console.log(date.getTime())
```
  - 需要实例化
  - 可以返回指定时间的时间戳
- +new Date()
```
console.log(+new Date())
```
  - 无需实例化
  - 可以返回指定时间的时间戳
- Date.now()
```
console.log(Date.now());
```
  - 无需实例化
  - 但是只能得到当前的时间戳

案例：倒计时

节点操作

DOM 节点

DOM树里每一个内容都称之为节点
节点类型
元素节点
- 所有的标签比如 body、 div
- html 是根节点
属性节点
- 所有的属性比如 href
文本节点
- 所有的文本
其他

查找节点

能够具备根据节点关系查找目标节点的能力

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

父节点查找：

<body>
  <div class="yeye">
    <div class="dad">
      <div class="baby">x</div>
    </div>
  </div>
  <script>
    const baby = document.querySelector('.baby')
    console.log(baby)  // 返回dom对象
    console.log(baby.parentNode)  // 返回dom对象
    console.log(baby.parentNode.parentNode)  // 返回dom对象
  </script>
</body>

parentNode 属性
- 返回最近一级的父节点，找不到返回为null
案例：点击关闭
- 获取三个按钮，点击关闭当前的父元素

子节点查找：
- childNodes
  - 获得所有子节点、包括文本节点（空格、换行）、注释节点等
- children 属性（重点）
  - 仅获得所有元素节点
  - 返回的还是一个伪数组
兄弟节点查找：
- 下一个兄弟节点
- nextElementSibling 属性
- 上一个兄弟节点
  - previousElementSibling 属性

增加节点

一般先创建节点，然后插入节点

创建节点

const div = document.createElement('div')

克隆节点(创建节点的特殊情况)

元素.cloneNode(布尔值)

// const ul = document.querySelector('ul')
// 克隆一个已有的元素节点
const li1 = ul.children[0].cloneNode(true)
// ul.appendChild(li1)

追加节点
- 父元素.append.Child(要插入的元素)
  
  插入到父元素的最后一个子元素
```
document.body.appendChild(div)
```
- 父元素.insertBefore(要插入的元素, 在哪个元素前面)
  
  插入到父元素中某个子元素的前面
```
ul.insertBefore(li, ul.children[0]) // 插入到第一个小li的位置
```

删除节点

目标：能够具备根据需求删除节点的能力

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

语法

父元素.removeChlid(子元素)

const ul = document.querySelector('ul')
// 删除节点  父元素.removeChlid(子元素)
ul.removeChild(ul.children[0])

如不存在父子关系则删除不成功

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

案例：学成在线重构

根据数据的个数，创建对应的小li（for循环）
1. 创建新的小li
2. 把内容给小li（innerHTML）
3. ul追加小li（.append.Child）

M端事件

目标：了解M端常见的事件
移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

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

触屏touch事件说明

touchstart 手指触摸到一个DOM元素时触发

touchmove 手指在一个DOM元素时触发

touchend 手指从一个DOM元素上移开时触发

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

插件

swiper

官方文档：https://www.swiper.com.cn/
- 看在线演示,找到符合自己需求的demo
- 查看基本使用流程
- 查看APi文档,去配置自己的插件
多个swiper同时使用的时候, 类名需要注意区分

案例：游乐园轮播图填充内容

引入 swiper.min.css 与 swiper.min.js

综合案例：学生信息表

<a href = “javascript:;"> 含义

是为了让超链接去执行js函数,点击此超链接时,页面不会进行任何操作,防止跳到其他页面
点击后,页面不动,只打开连接

①：声明一个空的数组

②：点击录入模块

(1). 首先取消表单默认提交事件
(2). 创建新的对象，里面存储表单获取过来的数据
(3). 追加给数组
(4). 渲染数据。遍历数组，动态生成tr，里面填写对应td数据，并追加给 tbody
(5). 重置表单（ HTMLFormElement.reset()方法，与reset按钮效果一样）
(6). 注意防止多次生成多条数据，先清空 tbody

③：点击删除模块
(1). 采用事件委托形式，给 tbody 注册点击事件
(2). 点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？
(3). 前面渲染数据的时候，动态给a链接添加自定义属性 data-id=“0”,这样点击当前对象就知道索引号了
(4). 根据索引号，利用 splice 删除这条数据
(5). 重新渲染

④：点击新增需要验证表单
(1). 获取所有需要填写的表单，他们共同特点都有 name属性
(2). 遍历这些表单，如果有一个值为空，则return 返回提示输入为空中断程序
(3). 注意书写的位置，应该放到新增数据的前面，阻止默认行为的后面

回流与重绘

浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)

同时解析（Parser） CSS，生成样式规则 (Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
Display: 展示在页面上

回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、
outline等), 称为重绘。

重绘不一定引起回流，而回流一定会引起重绘。

posted @ 2022-04-26 09:37 卷饼侠阅读(31) 评论(0) 收藏举报

刷新页面返回顶部

succodes