Web APIs day4 | Dom节点&移动端滑动 (日期\节点\M端\swiper)

最新推荐文章于 2023-06-26 16:44:23 发布

csyldjy

最新推荐文章于 2023-06-26 16:44:23 发布

阅读量298

点赞数

分类专栏： web APIs 前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/csyldjy/article/details/125162595

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

web APIs

7 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的日期对象，包括实例化、日期对象方法和时间戳的使用，以及DOM节点操作，如查找、增加、删除和克隆节点的方法。此外，还提到了移动端事件和JS插件Swiper的使用。文章通过实例展示了如何实现倒计时、动态渲染数据到页面以及创建轮播图等功能。

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

1 日期对象

1.1 实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化

创建时间

时间在计算机中的本质就是数字

        // date 日期 data 数据
        // 1 获取当前时间
        const date = new Date()
        console.log(date)

        // 2 创建指定时间
        // ① 字符串形式
        const date2 = new Date('1999-2-3') 
        console.log(date2.toLocaleDateString())   //日期本地化

        // ② 数字形式 取值(0-11)
        const date3 = new Date(1278, 2, 12, 1, 3, 2, 1)
        console.log(date3)

2.2 日期对象方法

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

案例-页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08

分析：

①：调用日期对象方法进行转换 ②：记得数字要补0 ③：字符串拼接后，通过 innerText 给标签

2.3 时间戳

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

什么是时间戳:

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

算法：

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

三种方式获取时间戳：

1. 使用 getTime() 方法

2 简写为 +new Date()

3. 使用 Date.now()

无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

案例下课倒计时效果

需求：计算到下课还有多少时间

分析：

①：用将来时间减去现在时间就是剩余的时间

②：核心：使用将来的时间戳减去现在的时间戳

③：把剩余的时间转换为天时分秒

注意：

1. 通过时间戳得到是毫秒，需要转换为秒再计算

2. 转换公式：

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

参考代码:

    下课倒计时:
    <span id="hours"></span>:
    <span id="minutes"></span>:
    <span id="seconds"></span>

        let h = document.querySelector('#hours')
        let m = document.querySelector('#minutes')
        let s = document.querySelector('#seconds')

        // 5 先调用一次函数,防延迟
        // 在停止计时期后刷新仍会调用一遍,出现负时间值.解决方法:在最后val=0的时间判断中,强制归零覆盖

        // 4 定时+封装函数
        const timer = setInterval(showtime, 1000)
        // 注意:如果把调用放在timer声明前,会跳过timer命名直接执行函数,最后也无法关闭
        showtime()


        function showtime() {
            // 1 获取开始/结束时间/差值(毫秒)
            const start = new Date
            const end = new Date(2022, 5, 7, 18, 30)
            // const val = end - start           // 时间可不换为时间戳直接加减,会隐式转换为时间戳
            const val = end.getTime() - start.getTime()

            // 2 时间转化为时分秒  /1000将毫秒转化为秒
            let hours = parseInt(val / 1000 / 60 / 60)
            let minutes = parseInt(val / 1000 / 60 % 60)
            let seconds = parseInt(val / 1000 % 60)

            // 6 补0
            hours = hours < 10 ? '0' + hours : hours
            minutes = minutes < 10 ? '0' + minutes : minutes
            seconds = seconds < 10 ? '0' + seconds : seconds

            // 3 展示数据
            h.innerHTML = hours
            m.innerHTML = minutes
            s.innerHTML = seconds

            // 7 结束计时+强制归零    
            // 注:时间戳以毫秒记,如果只把val = 0为条件,
            // 计算机精确不到差值为零的那刻来停止计时器,因此计时器继续运行到出现负时间差
            if (val <= 0) {
                clearInterval(timer)
                h.innerHTML = '00'
                m.innerHTML = '00'
                s.innerHTML = '00'
            }
        }

2 节点操作

2.1 DOM节点

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

节点类型

1 元素节点

所有的标签比如 body、 div
html 是根节点

2 属性节点

所有的属性比如 href

3 文本节点

所有的文本

4 其他

2.2 查找节点

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

2.2.1 父节点

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

案例关闭二维码案例

2.2.2 子节点查找

childNodes

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

children 属性（重点）

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

2.2.3 兄弟关系查找

1. 下一个兄弟节点

nextElementSibling 属性

2. 上一个兄弟节点

previousElementSibling 属性

2.3 增加节点

很多情况下，我们需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

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

2.3.1 创建节点

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

创建元素节点方法：

2.3.2.追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

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

也可以元素.innerHTML直接写入标签内容

案例学成在线案例渲染

需求：按照数据渲染页面

分析： ①：准备好空的ul 结构 ②：根据数据的个数，创建一个新的空li ③：li里面添加内容 img 标题等 ④：追加给ul

重点练习：创建节点和追加节点

        // 法一:    创建li并写入内容
        const clearfix = document.querySelector('.clearfix')
        for (let i = 0; i < data.length; i++) {

            // 2 新建、添加内容并追加
            const li = document.createElement('li')
            li.innerHTML = `
            <a href="#">
                        <img src="${data[i].src}" alt="">
                        <h4>
                            ${data[i].title}
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>${data[i].num}</span>人在学习
                        </div>
                    </a>`;
            clearfix.appendChild(li)
        }

        // 法二:    将li直接写为字符串
        const clearfix = document.querySelector('.clearfix')
        let str = ''

        for (let i = 0; i < data.length; i++) {
            str += `<li>
            <a href="#">
                        <img src="${data[i].src}" alt="">
                        <h4>
                            ${data[i].title}
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>${data[i].num}</span>人在学习
                        </div>
                    </a></li>`;
        }
        clearfix.innerHTML = str

2.3.3 克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点, 默认为false

注:克隆元素不要写id (id具有唯一性)

2.3.4 删除节点

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

注：

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

3 M端事件

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

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

        // 手指按下
        document.addEventListener('touchstart', function () {
            console.log('按')
        })
        // 手指移动
        document.addEventListener('touchmove', function () {
            console.log('移')
        })
        // 手指抬起
        document.addEventListener('touchend', function () {
            console.log('起')
        })