当前位置： 首页 > news >正文

WebAPIs 第四天

news 2025/11/18 17:23:06

1.日期对象

2.节点操作

3.M端事件

4.JS插件

一.日期对象

  • 实例化
  • 时间对象方法
  • 时间戳

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

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

1.1 实例化

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

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

  •  获取当前时间
const date = new Date()
  • 获得指定时间
const date = new Date('2022-01-05 08:28')

1.2 时间对象方法

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

const date = new Date() 
console.log(date.getFullYear())
console.log(date.getMonth() + 1)let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()

1.3  时间戳

① 概念：指的是1970年01月01日00分00秒起到现在的毫秒数，是一种特殊的计量时间的方式

② 算法

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

 ③ 获取时间戳

  • 使用getTime() 方法 (需要实例化)
const date = new Date()
console.log(date.getTime())
  • 简写 new Date() （无需实例化）
console.log(+new Date())
  • 使用Date.now() （无需实例化）

    但是只能得到当前的时间戳，前两种可以得到指定时间的时间戳

console.log(Date.now())

二.节点操作

  • DOM节点
  • 查找节点
  • 增加节点
  • 删除节点

2.1 DOM节点

① DOM节点：DOM树里面的每一个内容都称为节点

② 节点类型：

  • 元素节点：所有的标签，比如div body
  • 属性节点：所有的属性，比如href
  • 文本节点: 所有的文本
  • 其他

2.2 查找节点

① 节点关系

  • 父节点

   （1）parentNode属性

     (2）返回的最近一级的父节点，找不到返回为null

     (3) 语法：节点.parentNode   

const baby = document.querySelector('.son')
console.log(baby.parentNode.parentNode)
  • 子节点

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

     （2）children属性 ：仅获得所有元素节点，返回一个伪数组

     （3）语法：节点.children

const ul = document.querySelector('ul')
// 获取所有子节点
console.log(ul.children) //选择最近一级孩子

    

  • 兄弟节点

       (1) 下一个兄弟节点：nextElementSibling 属性

     （2）上一个兄弟节点：previousElementSibling 属性

const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.nextElementSibling)
console.log(li2.previousElementSibling)

2.3 增加节点

① 创建一个新节点

  • 概念：创造一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
  • 创建元素节点方法： document.createElement('标签名')
const div = document.createElement('div')
console.log(div)

② 追加节点（还需要插入到某个父元素中）

  • 插入到父元素的最后一个子元素:    appendChild
const div = document.createElement('div')
console.log(div)
document.body.appendChild(div)
  • 插入到父元素的某个子元素的前面: insertBefore
const ul = document.querySelector('ul')
const li = document.createElement('li')
ul.insertBefore(li, ul.children[0])

2.4 克隆节点

① 语法： 元素.cloneNode(布尔值)

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

  • 如果传入的是true,则代表克隆时会包含后代节点一起克隆
  • 如果传入的是false，则表示克隆时不包含后代节点
  • 默认为false
    <ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')const li1 = ul.children[0].cloneNode(true)ul.appendChild(li1)</script>

 2.5 删除节点

  ① 删除元素必须通过父元素删除

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

 ③ 注意

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

三.M端事件

① 移动端也有自己独特的地方，比如触屏事件touch,android和ios都有

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

③ 常见的触屏事件

        const div = document.querySelector('div')div.addEventListener('touchstart', function() {console.log('开始触摸')})div.addEventListener('touchmove', function() {console.log('一直触摸')})div.addEventListener('touchend', function() {console.log('停止触摸')})

四. JS插件 -- swiper

① 插件的概念：就是别人写好的一些代码，我们只需要复制对应的代码，就可以实现对应的效果② 学习插件过程

  • 熟悉官网，了解这个插件可以完成什么需求
  • 看在线演示，找到符合自己需求的demo
  • 查看基本使用流程
  • 查看API文档，去配置自己的插件
  • 多个swiper同时使用的时候，类名需要注意区分

swipper的 使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/swiper.min.css"><style>.box {width: 600px;height: 200px;background-color: pink;margin: 100px;}html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}</style>
</head>
<body><div class="box"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div><div class="swiper-slide">Slide 10</div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div>      </div><script src="./js/swiper.min.js"></script><script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',},autoplay: {delay: 1000,//1秒切换一次// 鼠标点击或触摸之后，继续自动播放disableOnInteraction: false,},// 键盘keyboard: {enabled: true,onlyInViewport: true,},});</script>
</body>
</html>

相关文章：

WebAPIs 第四天

1.日期对象 2.节点操作 3.M端事件 4.JS插件 一.日期对象 实例化时间对象方法时间戳 日期对象&#xff1a;用来表示时间的对象 作用&#xff1a;可以得到当前系统时间 1.1 实例化 ① 概念&#xff1a;在代码中发现了new关键字时&#xff0c;一般将这个操作称为实例化 …...

编程日记 2023/8/14 19:59:22

SQL 语句解析过程详解

SQL 语句解析过程详解&#xff1a; 1&#xff0e;输入SQL语句 2&#xff0e;词法分析------flex 使用词法分析器&#xff08;由Flex生成&#xff09;将 SQL 语句分解为一个个单词&#xff0c;这些单词被称为“标记“。标记包括关键字、标识符、运算符、分隔符等。 2.1 flex 原…...

编程日记 2023/8/14 19:58:21

单源最短路径【学习算法】

单源最短路径【学习算法】 前言版权推荐单源最短路径Java算法实现代码结果 带限制的单源最短路径1928. 规定时间内到达终点的最小花费LCP 35. 电动车游城市 最后 前言 2023-8-14 18:21:41 以下内容源自《【学习算法】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此…...

编程日记 2023/8/14 19:57:19

汽车上的电源模式详解

① 一般根据钥匙孔开关的位置来确定整车用电类别&#xff0c;汽车上电源可以分为常电&#xff0c;IG电&#xff0c;ACC电 1&#xff09;常电。常电表示蓄电池和发电机输出直接供电&#xff0c;即使点火开关在OFF档时&#xff0c;也有电量供应。一般来讲模块的记忆电源及需要在车…...

编程日记 2023/8/14 19:56:18

【碎碎念随笔】1、回顾我的电脑和编程经历

✏️ 闲着无事&#xff0c;讲述一下我的计算机和代码故事 一、初识计算机 &#x1f5a5;️ 余家贫&#xff0c;耕植无钱买电脑。大约六年级暑假&#xff0c;我在姐姐哪儿第一次接触到了计算机&#xff08;姐姐也是买的二手&#xff09;。 &#x1f5a5;️ 计算机真有趣&#x…...

编程日记 2023/8/14 19:55:17

背上花里胡哨的书包准备面试之webpack篇（+一些常问的面试题）

目录 webpack理解&#xff1f; webpack构建流程&#xff1f; loader解决什么问题&#xff1f; plugin解决什么问题&#xff1f; 编写loader和plugin的思路&#xff1f; webpack热更新&#xff1f; 如何提高webpack的构建速度&#xff1f; 问git常用命令&#xff1f; ht…...

编程日记 2023/8/14 19:54:15

你知道什么是Curriculum Training模型吗

随着深度学习技术的飞速发展&#xff0c;研究人员在不断探索新的训练方法和策略&#xff0c;以提高模型的性能和泛化能力。其中&#xff0c;Curriculum Training&#xff08;课程学习&#xff09;模型作为一种前沿的训练方法&#xff0c;引起了广泛的关注和研究。本文将深入探讨…...

编程日记 2023/8/14 19:53:13

vue 大文件视频切片上传处理方法

前端上传大文件、视频的时候会出现超时、过大、很慢等情况&#xff0c;为了解决这一问题&#xff0c;跟后端配合做了一个切片的功能。 我这个切片功能是基于 minion 的&#xff0c;后端会把文件放在minion服务器上。具体看后端怎么做 1、在项目的 util(这个文件夹是自己创建的…...

编程日记 2023/8/14 19:52:12

痞子衡嵌入式：AppCodeHub - 一站网罗恩智浦MCU应用程序

近日&#xff0c;恩智浦官方隆重上线了应用程序代码中心(Application Code Hub&#xff0c;简称 ACH)&#xff0c;这是恩智浦 MCUXpresso 软件生态的一个重要组成部分。痞子衡之所以要如此激动地告诉大家这个好消息&#xff0c;是因为 ACH 并不是又一个恩智浦官方 github proje…...

编程日记 2023/8/14 19:51:09

打造数字化营销闭环，破解精准获客难题

现阶段&#xff0c;企业需要进行数字化营销闭环&#xff0c;以实现更精确的客户获取。随着数字技术的迅猛发展&#xff0c;企业需要将在线广告、社交媒体营销和数据分析等工具相互结合&#xff0c;建立一个完整的数字化营销流程。通过使用客户细分、精准定位和个性化广告等手段…...

编程日记 2023/8/14 19:50:06

《雷达像智能识别对抗研究进展》阅读记录

&#xff08;1&#xff09;引言 ​ 神经网络通常存在鲁棒性缺陷&#xff0c;易受到对抗攻击的威胁。攻击者可以隐蔽的诱导雷达智能目标识别做出错误预测&#xff0c;如&#xff1a; ​ a图是自行车&#xff0c;加上对抗扰动后神经网络就会将其识别为挖掘机。 &#xff08;2&a…...

编程日记 2023/8/14 19:49:04

【AHB】初识 AHB 总线

AHB 与 APB、ASB同属于 AMBA 总线架构规范&#xff0c;该总线规范由 ARM 公司提出。 目录 一、AHB 总线 二、AHB 总线组成 三、AHB 主从通信过程 一、AHB 总线 AHB&#xff08;Advanced High Performance Bus&#xff09;,意为高级高性能总线&#xff0c;能将微控制器&…...

编程日记 2023/8/14 19:48:03

Linux服务使用宝塔面板搭建网站，通过内网穿透实现公网访问

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…...

编程日记 2023/8/14 19:47:01

C++ 判断

判断结构要求程序员指定一个或多个要评估或测试的条件&#xff0c;以及条件为真时要执行的语句&#xff08;必需的&#xff09;和条件为假时要执行的语句&#xff08;可选的&#xff09;。 下面是大多数编程语言中典型的判断结构的一般形式&#xff1a; 判断语句 C 编程语言…...

编程日记 2023/8/14 19:46:00

“解引用“空指针一定会导致段错误吗?

可能有些朋友看见这个标题第一反应是嵌入式的某些内存中,0地址也是可以被正常访问的,所以对0地址的解引用不会发生错误,但我要说的情况不是这个,而是指一个真正的空指针,不仅是c/c中的0,(void*)0,NULL,还有nullptr,一个真正的空指针. 在c语言中,想获得某结构体的成员变量相对偏…...

编程日记 2023/8/14 19:44:58

釉面陶瓷器皿SOR/2016-175标准上架亚马逊加拿大站

亲爱的釉面陶瓷器皿和玻璃器皿制造商和卖家&#xff0c;亚马逊加拿大站将执行SOR/2016-175法规。这是一份新的法规&#xff0c;规定了含有铅和镉的釉面陶瓷器和玻璃器皿需要满足的要求。让我们一起来看一看&#xff0c;为什么要实行SOR/2016-175法规&#xff1f;这是一个保护消…...

编程日记 2023/8/14 19:43:55

Redux - Redux在React函数式组件中的基本使用

文章目录 一&#xff0c;简介二&#xff0c;安装三&#xff0c;三大核心概念Store、Action、Reducer3.1 Store3.2 Reducer3.3 Action 四&#xff0c;开始函数式组件中使用4.1&#xff0c;引入store4.1&#xff0c;store.getState()方法4.3&#xff0c;store.dispatch()方法4.4&…...

编程日记 2023/8/14 19:42:54

rust学习-同时执行多Future

只用 .await 来执行future，会阻塞并发任务，直到特定的 Future 完成 join!：等待所有future完成 可事实上为什么都是res1完成后再执行res2？ join! 不保证并发执行，难道只负责同步等待？ 示例 [package] name = "rust_demo5" version = "0.1.0" edit…...

编程日记 2023/8/14 19:41:52

问道管理：旅游酒店板块逆市拉升，桂林旅游、华天酒店涨停

游览酒店板块14日盘中逆市拉升&#xff0c;到发稿&#xff0c;桂林游览、华天酒店涨停&#xff0c;张家界涨超8%&#xff0c;君亭酒店涨超5%&#xff0c;众信游览、云南游览涨逾4%。 音讯面上&#xff0c;8月10日&#xff0c;文旅部办公厅发布康复出境团队游览第三批名单&#…...

编程日记 2023/8/14 19:40:50

算法通关村第三关——数组白银

文章目录 一、删除元素1.1 原地移除所有值等于val的元素1.2 删除有序数组中的重复项 二、元素奇偶移动三、数组轮转 一、删除元素 1.1 原地移除所有值等于val的元素 LeetCode 27.移除元素 解法1&#xff1a;快慢指针 class Solution {public int removeElement(int[] nums, …...

编程日记 2023/8/14 19:39:48

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/11/16 22:26:48

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/11/16 22:21:47

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/11/16 21:47:49

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/1 23:43:26

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/11/17 0:01:24

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/11/16 21:56:22

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/11/17 21:41:37

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/18 8:57:24