Web APIs 4 日期对象、节点操作

Web APIs 4

  • 一、日期对象
    • 实例化
    • 日期对象方法
      • 案例:页面显示时间
    • 时间戳
  • 二、节点操作
    • 查找结点
      • ①父节点查找
      • ②子节点查找
      • ③兄弟节点查找
    • 增加节点
    • 克隆节点
    • 删除节点
  • 三、M端事件
  • 四、JS插件

一、日期对象

学习路径:实例化、日期对象方法、时间戳

实例化

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

获得当前时间

const date = new Date()
console.log(date) // Mon Feb 19 2024 16:45:04 GMT+0800 (中国标准时间)

获得指定时间

const date = new Date('2008-8-8')
console.log(date) // Fri Aug 08 2008 00:00:00 GMT+0800 (中国标准时间)

日期对象方法

在这里插入图片描述

const date = new Date()
console.log(date.getFullYear()); // 2024
console.log(date.getMonth() + 1); // 2
console.log(date.getDate()); // 19
console.log(date.getDay());//返回的是 周几,但是周天是0

案例:页面显示时间

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

<style>div {width: 300px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}
</style>
<body><div></div>
</body>
<script>function getMyDate() {const date = new Date()let month = date.getMonth() + 1let day = date.getDate()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()month = month < 10 ? '0' + month : monthday = day < 10 ? '0' + day : dayh = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `${date.getFullYear()}${month}${day}${h}:${m}:${s}`// return `2024年2月19日 16:56:00`}const div = document.querySelector('div')div.innerHTML = getMyDate()//如果不写上面这一句 刷新的时候会有空白,回调函数的意思是隔了一秒再调用setInterval(function(){div.innerHTML = getMyDate()},1000)
</script>

或者还有几种方法

<script>const div = document.querySelector('div')const date = new Date()div.innerHTML = date.toLocaleString() //2024/2/19 17:10:43div.innerHTML = date.toLocaleDateString() //2024/2/19div.innerHTML = date.toLocaleTimeString() //17:11:35
</script>

时间戳

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

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

算法:

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

② 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间

③ 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms

④ 1000ms 转换为就是 0小时0分1秒

在这里插入图片描述

// 指定时间的时间戳
console.log(+new Date('2022-4-1 18:30:00'))

二、节点操作

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

节点类型

①元素节点

​ 所有的标签 比如 body、 div

​ html 是根节点

②属性节点

​ 所有的属性 比如 href

③文本节点

​ 所有的文本

④其他
在这里插入图片描述

重点记住元素节点

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

查找结点

关闭二维码案例:点击关闭按钮, 关闭的是二维码的盒子(也就是按钮的父节点), 还要获取二维码盒子

解法:关闭按钮 和 二维码是父子关系。所以,我们完全可以这样做:点击关闭按钮, 直接关闭它的爸爸,就无需获取二维码元素了

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

​ 父节点

​ 子节点

​ 兄弟节点

查找结点默认元素节点。

①父节点查找

parentNode 属性

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

语法 :子节点.parentNode

<body><div class="grandfather"><div class="dad"><div class="baby"></div></div></div>
</body>
<script>const baby = document.querySelector('.baby')console.log(baby);console.log(baby.parentNode);console.log(baby.parentNode.parentNode);
</script>

在这里插入图片描述

广告关闭案例<div class="box">我是广告<div class="box1">X</div></div><script>const box1 = document.querySelector('.box1')box1.addEventListener('click', function() {this.parentNode.style.display = 'none'//这里用了this})</script>这里如果有多个广告
<body><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><script>const closeBtn = document.querySelectorAll('.box1')for(let i = 0; i < closeBtn.length; i++) {closeBtn[i].addEventListener('click', function() {this.parentNode.style.display = 'none'})}</script>

②子节点查找

  • childNodes

​ 获得所有子节点、包括文本节点(空格、换行)、注释节点等

  • children 属性 (重点)

​ 仅获得所有元素节点

​ 返回的还是一个伪数组,选的是最近的子节点

<body><ul><li></li><li></li><li></li><li></li><li></li></ul>
</body>
<script>const ul = document.querySelector('ul')console.log(ul.children);
</script>

③兄弟节点查找

  • 下一个兄弟节点 nextElementSibling 属性
  • 上一个兄弟节点 previousElementSibling 属性
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
<script>const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling);console.log(li2.nextElementSibling);
</script>

增加节点

很多情况下,我们需要在页面中增加元素。比如,点击发布按钮,可以新增一条信息

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

  • 创建一个新的节点

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

步骤1.创建节点

创建元素节点方法 document.createElement(‘标签名’)

步骤2.追加节点

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

  • 插入到父元素的最后一个子元素: 父元素.appendChild(要插入的元素)

  • 插入到父元素中某个子元素的前面: 父元素.insertBefore(要插入的元素,在那个元素前面)

<body><ul><li>哈哈哈</li></ul>
</body>
<script>const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML="我是追加的li"ul.appendChild(li)
</script>
<body><ul><li>哈哈哈</li></ul>
</body>
<script>const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML="我是追加的li"ul.insertBefore(li, ul.children[0])
</script>

克隆节点

特殊情况下,我们新增节点,按照如下操作:

复制一个原有的节点

把复制的节点放入到指定的元素内部 先克隆再追加

语法:元素.cloneNode(布尔值)

  • 克隆一个已有节点
  • 括号内传入布尔值:若为true,则代表克隆时会包含后代节点一起克隆;若为false,则代表克隆时不包含后代节点(只克隆标签); 默认为false,大部分情况都是true
<body><ul><li>1</li><li>2</li><li>3</li></ul>
</body>
<script>const ul = document.querySelector('ul')// 克隆第一个liconst li1_copy = ul.children[0].cloneNode(true)ul.appendChild(li1_copy)
</script>

删除节点

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

在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除,这里必须是亲爸爸亲儿子

语法:父元素.removeChild(要删除的元素)

【注意】:

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

  • 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点,从DOM树中删除了

<body><ul><li>没用的</li><li>有用的</li></ul>
</body>
<script>const ul = document.querySelector('ul')ul.removeChild(ul.children[0])
</script>

三、M端事件

M端,就是mobile,移动端。

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

  • 触屏事件 touch(也称触摸事件),Android 和 IOS 都有。

  • touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

  • 常见的触屏事件如下:
    在这里插入图片描述

<style>div {width: 300px;height: 400px;background-color: pink;}
</style>
<body><div></div>
</body>
<script>const div = document.querySelector('div')div.addEventListener('touchstart', function() {console.log('开始触摸');})div.addEventListener('touchend', function() {console.log('触摸结束');})div.addEventListener('touchmove', function() {console.log('一直触摸');})
</script>

四、JS插件

  • 插件:就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

  • 学习插件的基本过程

熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/731974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL 系列】MySQL 语句篇_DML 语句

DML&#xff08;Data Manipulation Language&#xff09;&#xff0c;即数据操作语言&#xff0c;用于操作数据库对象中所包含的数据。常用关键字包括&#xff1a;插入&#xff08;INSERT&#xff09;、更新&#xff08;UPDATE&#xff09;、删除&#xff08;DELETE&#xff09…

Linux命令详解——mkdir创建文件夹与touch创建文件

在windows图形化系统中想要通识创建多个文件夹似乎是一件比较困难的事情&#xff0c;但在linux系统下&#xff0c;这将变得简单 mkdir参数&#xff0c;-p&#xff0c;递归创建文件夹 mkdir创建多个文件 touch可以创建文件&#xff0c;以及修改文件时间

idea远程服务器debug

前提 本地代码和服务器代码一致 idea中创建远程服务 一般只需要修改ip&#xff0c;注意这边的端口是监听Socket的端口&#xff0c;不是服务的端口 然后把运行参数复制一下 -agentlib:jdwptransportdt_socket,servery,suspendn,address5005 tomcat启动 在tomcat的lib下的c…

Pytorch学习 day07(神经网络基本骨架的搭建、2D卷积操作、2D卷积层)

神经网络基本骨架的搭建 Module&#xff1a;给所有的神经网络提供一个基本的骨架&#xff0c;所有神经网络都需要继承Module&#xff0c;并定义_ _ init _ _方法、 forward() 方法在_ _ init _ _方法中定义&#xff0c;卷积层的具体变换&#xff0c;在forward() 方法中定义&am…

HTML入门:属性

你好&#xff0c;我是云桃桃。今天来聊一聊 HTML 属性写法和特点。 HTML 属性是用于向 HTML 标签&#xff08;也叫 HTML 元素&#xff09;提供附加信息或配置的特性。 如果说&#xff0c;把HTML 标签比作一个房子&#xff0c;HTML 标签定义了房子的结构和用途&#xff0c;比如…

FPGA高端项目:FPGA基于GS2971的SDI视频接收+HLS图像缩放+多路视频拼接,提供4套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收OSD多路视频融合叠加应用本方案的SDI接收HLS多路视频融合叠加应用本方案…

Unity中PICO实现移动交互

文章目录 前言一、在允许行走的地面加上对应的组件1、Teleportation Anchor 移动锚点2、Teleportation Area 移动区域 二、在 玩家&#xff08;需要移动的对象&#xff09;上挂载对应组件1、Teleportation Provider 被移动对象2、在 Teleportation Anchor 或 Teleportation Are…

【go语言开发】yaml文件配置和解析

本文主要介绍使用第三方库来对yaml文件配置和解析。首先安装yaml依赖库&#xff1b;然后yaml文件中配置各项值&#xff0c;并给出demo参考&#xff1b;最后解析yaml文件&#xff0c;由于yaml文件的配置在全局中可能需要&#xff0c;可定义全局变量Config&#xff0c;便于调用 文…

CCProxy代理服务器地址的设置步骤

目录 前言 一、下载和安装CCProxy 二、启动CCProxy并设置代理服务器地址 三、验证代理服务器设置是否生效 四、使用CCProxy进行代理设置的代码示例 总结 前言 CCProxy是一款常用的代理服务器软件&#xff0c;可以帮助用户实现网络共享和上网代理。本文将详细介绍CCProxy…

【鸿蒙 HarmonyOS 4.0】应用状态:LocalStorage/AppStorage/PersistentStorage

一、介绍 如果要实现应用级的&#xff0c;或者多个页面的状态数据共享&#xff0c;就需要用到应用级别的状态管理的概念。 LocalStorage&#xff1a;页面级UI状态存储&#xff0c;通常用于UIAbility内、页面间的状态共享。AppStorage&#xff1a;特殊的单例LocalStorage对象&…

数据库系统概念(第一周)

⚽前言 &#x1f3d0;四个基本概念 一、数据 定义 种类 特点 二、数据库 三、数据库管理系统&#xff08;DBMS&#xff09; 四、 数据库系统&#xff08;DBS&#xff09; &#x1f3c0;数据库系统和文件系统对比 文件系统的弊端 &#x1f94e;数据视图 数据抽象 …

java 环境配置(保姆级最新版)

&#x1f600;前言 ps 因为网络上教程太多太杂所以干脆直接自己出个教程方便自己复习也希望帮助到大家 文章目录 第一查看自己电脑的系统类型第二 jdk下载历史jdk下载 第三 jdk安装第四 环境搭配Java_Home 配置Path 配置CLASSPATH 配置 检测是否配置成功 第一查看自己电脑的系统…

机器学习流程—数据预处理 清洗

机器学习流程—数据预处理 清洗 数据清洗因为它涉及识别和删除任何丢失、重复或不相关的数据。数据清理的目标是确保数据准确、一致且无错误,因为不正确或不一致的数据会对 ML 模型的性能产生负面影响。专业数据科学家通常会在这一步投入大量时间,因为他们相信Better data b…

Dynamo3.0.3——六年来最大的更新

Hello大家好&#xff01;我是九哥~ 前几天&#xff0c;Dynamo Core 3.0.0版本发布&#xff0c;迎来了Dynamo六年来最大的一次更新。最大的改变&#xff0c;是更新到了.net8&#xff0c;这回对Dynamo节点包产生不小影响。接下来我们详细看一下都有哪些变化。 首先&#xff0…

Charles的安装及配置

1 Charles激活 激活网址:https://tools.zzzmode.com/mytools/charles/ 得到的激活码后打开Charles,选择help里的registered 进行登录 2 进行ssl代理设置(用来抓取https的请求) 3 输入ssl代理的host和port 4 安装本机证书(选择完成后点击下一步或确定就行) 手机相关配置(保持手…

瑞_23种设计模式_模板方法模式

文章目录 1 模板方法模式&#xff08;Template Pattern&#xff09; ★ 钩子函数1.1 介绍1.2 概述1.3 模板方法模式的结构1.4 模板方法模式的优缺点1.5 模板方法模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析&#xff08;InputStre…

[BUUCTF]-PWN:starctf_2019_babyshell解析(汇编\x00开头绕过+shellcode)

查看保护 查看ida 这里就是要输入shellcode&#xff0c;但是函数会有检测。 在shellcode前面构造一个以\x00机器码开头的汇编指令&#xff0c;这样就可以绕过函数检查了。 完整exp&#xff1a; from pwn import* context(log_leveldebug,archamd64) pprocess(./babyshell)she…

【C++】C语言为什么不能函数重载?

文章目录 1.概念2. C为什么支持函数重载&#xff1f; 1.概念 C允许功能类似的同名函数出现&#xff0c;只要形参列表中的参数个数、类型、类型顺序不同&#xff0c;满足这三个条件中任意一个则构成函数重载&#xff0c;函数重载常用来处理实现功能类似数据类型不同的问题。 /…

【Docker4】使用Harbor搭建私有仓库

Docker私有仓库一、搭建本地私有仓库1、daemon.json 配置文件中常用配置项2、搭建私有仓库3、Docker容器重启策略 二、Docker--harbor私有仓库部署与管理1、Harbor 简介2、Harbor的特性3、Harbor的构成4、Harbor 部署4.1、部署 Docker-Compose 服务4.2、部署 Harbor 服务4.3、启…

解决文件过大无法存入U盘

如果文件达到4GB以上大小,且还是比U盘容量小,却放不进去。 这是由于格式问题。 U盘默认格式是FAT32,存放的单个文件大小不能超过4GB 可以修改U盘格式为exFAT或者NTFS格式。这样不会收到限制 下面以Windows11系统进行演示: 1.连接U盘 2.按WINe打开文件管理器 3.点击"文件…