Web APIs-日期对象、DOM节点、移动端滑动

日期对象、DOM节点、移动端滑动

一.日期对象

日期对象 Date

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

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

实例化:

日期对象使用必须先实例化：即创建一个日期对象并获取时间

获取当前日期 : const 变量名= new Date( )

获取指定的日期 : const 变量名 = new Date(‘2099-12-12 08:08:08’)

格式化日期对象

getFullYear() 获得年份 获取四位年份

getMonth() 获得月份 取值为 0 ~ 11

getDate() 获取月份中的每一天 不同月份取值也不相同

getDay() 获取星期 取值为 0 ~ 6

getHours() 获取小时 取值为 0 ~ 23

getMinutes() 获取分钟 取值为 0 ~ 59

getSeconds() 获取秒 取值为 0 ~ 59

格式化日期对象方法(二)

toLocaleString() 返回该日期对象的字符串（包含日期和时间） 2099/9/20 18:30:43

toLocaleDateString() 返回日期对象日期部分的字符串 2099/9/20

toLocaleTimeString() 返回日期对象时间部分的字符串 18:30:43

时间戳

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

使用场景： 计算倒计时效果，需要借助于时间戳完成

使用方法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

三种方式获取时间戳：

1.date对象.getTime

2.+new Date()

3.Date.now() 只能获取当前时间

二.DOM节点

1.DOM树

**DOM树：**DOM 将 HTML文档以树状结构直观的表现出来，我们称之为 DOM 树 或者 节点树

DOM节点的三种分类:

元素节点 : 所有的标签 比如 body、 div ; html 是根节点

属性节点 : 所有的属性 比如 href

文本节点 : 所有的文本 节点（**Node）**是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

2.查找节点

查找节点：利用节点关系查找节点，返回的都是对象 ( 父节点 / 子节点 / 兄弟节点 )

**父节点查找：**子元素.parentNode

子节点查找(children)： 节点对象.children

获得所有子元素节点，返回的是一个伪数组

兄弟关系查找：

(1)**下一个兄弟 ** : 节点对象.nextElementSibling

(2)上一个兄弟 : 节点对象.previousElementSibling

3.增加节点

1.创建节点

document.createElement(‘标签名’)

2.追加节点

(1)父元素最后一个子节点之后，插入节点元素

父节点.append(标签名)

(2)父元素第一个子元素的之前，插入节点元素

父节点.prepend(标签名)

4.删除节点

把对象从它所属的 DOM 树中删除

语法 : 元素.remove()

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

三.移动端事件(M端事件)

触屏(touch)事件

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

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

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

四.swiper插件

小demo的实现步骤

1. 下载相关js文件和css文件引入到html页面中

2. 找到自己喜欢的轮播图 demo，新窗口中打开，然后复制相关css、html、js代码

3. 填充自己的图片

五.AlloyFinger插件

AlloyFinger 是腾讯 AlloyTeam 团队开源的Web 手势插件，为元素注册各种手势事件

使用步骤：

1. 下载js库

2. 将AlloyFinger库引入当前文件或者使用在线地址

3. 配置

`new AlloyFinger(element, {```

// 是给哪个元素做滑动事件

​ // 滑动时候触发的函数

​ swipe: *function* (*evt*) {

​ // direction 滑动的方向 Left Right 注意第一个字母要大写

​ // console.log("swipe" + evt.direction)

​ // 如果往左滑动，则让item盒子添加 active类，就可以让盒子左侧移动了

​ if (*evt*.direction === 'Left') {

​ // console.log('左侧滑动了')

​ item.classList.add('active')

​ } else {

​ item.classList.remove('active')

​ }

​ }

​ })

// console.log('左侧滑动了')

​ item.classList.add('active')

​ } else {

​ item.classList.remove('active')

​ }

​ }

​ })