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

JavaScript WebAPI（三）（详解）

news 2025/11/6 17:58:49

这次介绍一下webAPI中的一些知识：

回调函数

回调函数是指 如果将函数A做为参数传递给函数B时，我们称函数A为回调函数

例如：

// 立即执行函数中传递的函数是一个回调函数
(function(){  console.log("我是回调函数")
})();
// 监听事件中传递的参数是一个回调函数
const div = document.querySelector('div')
div.addEventListener('click',function(){console.log("我是回调函数")
})

只需要记住，如果一个函数A调用函数B作为自己的参数，那么函数B就是回调函数

时间戳

定义：

时间戳是指用来表示某个时间点的数字或字符串。它通常是一个长整型数字，表示自某个固定的起始时间（如1970年1月1日00:00:00 UTC）到某个特定时间点所经过的秒数或毫秒数。时间戳在计算机系统中广泛应用，用于记录事件发生时间、排序、计时等方面。

时间戳的定义可以有多种形式，最常见的是UNIX时间戳，即从1970年1月1日00:00:00 UTC开始计算的秒数。例如，当前时间的UNIX时间戳可以表示为一个长整型数字，比如1638356433。

获取时间戳的三种方式：

  1. 使用方法(getTime())获取
    创建一个Date对象然后调用方法getTime()     
    const time = new Date()
console.log(time.getTime())
  2. 直接输出
    创建一个事件对象直接使用他的返回值     
    console.log(+new Date())
  3. 调用方法 
    console.log(Date.now())

可以使用 Date`构造函数来创建指定的日期和时间，构造函数的参数可以是数字、字符串或按年月日等顺序的多个数值。

例如，下面的代码创建了一个 Date 对象来表示 2022 年 10 月 24 日，上午 11 点 30 分：

const date = new Date(2022, 9, 24, 11, 30, 0);

移动端事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;margin: 100px auto;background-color: pink;}</style>
</head><body><div></div><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>
</body></html>


 

windows对象

将他称为BOM对象：这张图片整合的非常好，我直接放到这里了

 

一些常见的Window对象的属性和方法包括：

  • window.alert()：在屏幕上弹出一个警告框。
  • window.prompt()：在屏幕上弹出一个提示框，要求用户输入文本。
  • window.confirm()：在屏幕上弹出一个确认框，要求用户选择“确定”或“取消”。
  • window.location：表示当前页面的URL地址。
  • window.history：表示浏览器的历史记录，可以通过history.back()和history.forward()方法回退和前进历史记录。
  • window.document：表示当前页面的文档对象，可以通过它访问和修改页面中的元素和内容。
  • window.setTimeout()和window.setInterval()：用于设置定时器，可以在指定的时间后执行一段代码，或每隔一段时间执行一段代码。
  • window.XMLHttpRequest()：用于创建XMLHttpRequest对象，可以发送HTTP请求和接收服务器返回的数据。

定时器

重复执行

setInterval()是Window对象提供的一个方法，用于设置定时器，重复执行指定的代码或函数。它接受两个参数：要执行的代码或函数，以及执行的时间间隔（以毫秒为单位）。

setInterval(code, delay)
  • code：要执行的代码或函数。可以直接传入一段代码，也可以传入一个函数名。
  • delay：执行的时间间隔，以毫秒为单位。

例如，下面的代码会每隔1秒钟输出一次"Hello, World!"：

setInterval(function() {console.log("Hello, World!");
}, 1000);

定时器会按照指定的时间间隔循环执行指定的代码或函数，直到页面被关闭或调用clearInterval()停止定时器。

需要注意返回的值是唯一的，一个定时器对应一个标识符，可以使用这个标识符来取消定时器，即停止代码的执行。可以使用clearInterval()方法来取消定时器，示例如下：

var timerId = setInterval(function() {console.log("Hello, World!");
}, 1000);// 取消定时器
clearInterval(timerId);

定时器-延时函数：

定时执行相应的行为：只执行一次

用法和setInterval相似，填写等待事件 和 执行行为，清除也是调用只有一个标识符，没调用一次生成一个唯一的标识符，清除标识符clearsetTimeout

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const l = setInterval(() => {console.log(1)}, 1000);setTimeout(function(){clearInterval(l)console.log("清除成功")},3000)</script>
</body>
</html>

js执行机制

同步任务：就是再主线程上进行，形成一个执行栈

异步任务：

  1. 执行栈（Execution Stack）：JavaScript代码的执行过程中，使用执行栈来管理函数调用和执行上下文。

  2. 任务队列（Task Queue）：包括宏任务队列（macrotask queue）和微任务队列（microtask queue）。常见的宏任务包括setTimeout、setInterval、I/O操作等，而微任务包括Promise、MutationObserver等。

  3. 事件循环（Event Loop）：不断地从任务队列中取出任务，放入执行栈中执行，这个过程就是事件循环。事件循环会不断地从任务队列中取出任务，放到执行栈中执行，直到任务队列为空。

location

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

常用的属性和方法：

属性：

  • location.href：获取或设置完整的 URL。
  • location.protocol：获取或设置 URL 的协议部分（如 "http:"、"https:"）。
  • location.host：获取或设置 URL 的主机部分（包括主机名和端口号）。
  • location.hostname：获取或设置 URL 的主机名部分。
  • location.port：获取或设置 URL 的端口号部分。
  • location.pathname：获取或设置 URL 的路径部分。
  • location.search：获取或设置 URL 的查询字符串部分（即问号后面的内容）。
  • location.hash：获取或设置 URL 的片段标识符部分（即井号后面的内容）。

方法：

  • location.assign(url)：加载指定的 URL，作为新的文档。
  • location.reload()：重新加载当前文档。
  • location.replace(url)：用指定的 URL 替换当前文档，且不会生成新的历史记录。

navgator对象

检测设备然后查看是否需要自动跳转到对应的设备网站

history对象：

执行前进或者后退操作

back()执行的是后退的功能
forward()前进功能
go(参数)参数1前进 参数2 后退

本地储存:

localStorage：可以将数据永久储存到本地(电脑文件),除非手动删除，否则关闭页面也会存在

特性:

        可以多窗口(页面共享)

        以键值对的形式储存使用

储存数据:

语法：

储存数据:localStorage.setItem(key,value)

获取数据:localStorage.getItem(key)

删除数据.localStorage.removeItem(key)

// 存储数据
localStorage.setItem('key', 'value');// 获取数据
var value = localStorage.getItem('key');// 删除数据
localStorage.removeItem('key');

sessionStorage: 该对象用于临时保存数据，数据只在当前会话期间有效。当用户关闭了浏览器窗口或标签页后，数据会被清除。

// 存储数据
sessionStorage.setItem('key', 'value');// 获取数据
var value = sessionStorage.getItem('key');// 删除数据
sessionStorage.removeItem('key');

IndexedDB: IndexedDB是一种更高级的本地数据库解决方案，可以存储结构化数据。它提供了一个异步API，允许开发者执行复杂的数据库操作。

下面是使用IndexedDB进行基本操作的示例：

// 打开或创建数据库
var request = window.indexedDB.open('databaseName', version);// 监听打开数据库的成功事件
request.onsuccess = function(event) {var db = event.target.result;// 执行数据库操作// ...
};// 监听打开数据库的错误事件
request.onerror = function(event) {console.error("Database error: " + event.target.errorCode);
};// 创建一个对象存储空间
var objectStore = db.createObjectStore('storeName', { keyPath: 'key' });// 存储数据
var transaction = db.transaction('storeName', 'readwrite');
var store = transaction.objectStore('storeName');
store.put({ key: 'key1', value: 'value1' });// 获取数据
var getRequest = store.get('key1');
getRequest.onsuccess = function(event) {var result = event.target.result;console.log(result);
};// 删除数据
var deleteRequest = store.delete('key1');
deleteRequest.onsuccess = function(event) {console.log("Data deleted successfully");
};

相关文章：

JavaScript WebAPI（三）（详解）

这次介绍一下webAPI中的一些知识&#xff1a; 回调函数 回调函数是指 如果将函数A做为参数传递给函数B时&#xff0c;我们称函数A为回调函数 例如&#xff1a; // 立即执行函数中传递的函数是一个回调函数 (function(){ console.log("我是回调函数") })(); // …...

编程日记 2023/12/2 21:33:03

LeetCode哈希表：最长连续序列

LeetCode哈希表&#xff1a;最长连续序列 题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&…...

编程日记 2023/12/2 21:31:01

SpringBoot+redis实现接口防刷

写一个RedisService&#xff0c;实现获取Redis 的set、get、incr&#xff08;相当于计数器&#xff09; 写inferface注解类 做一个拦截器&#xff0c;因为要先于控制器判断 将拦截器注入Springboot 文章目录 目录 文章目录 前言 一、引入依赖 二、使用步骤 2.1 RedisServic…...

编程日记 2023/12/2 21:22:52

5G承载网和大客户承载的演进

文章目录 移动4/5G承载网联通和电信4/5G承载网M-OTN&#xff08;Metro-optimized OTN&#xff09;&#xff0c;城域型光传送网PeOTN&#xff08;packet enhanced optical transport network&#xff09;&#xff0c;分组增强型OTN板卡增强型PeOTN集中交叉型PeOTN VC-OTN&#x…...

编程日记 2023/12/2 21:16:37

智慧工地一体化解决方案（里程碑管理）源码

智慧工地为管理人员提供及时、高效、优质的远程管理服务&#xff0c;提升安全管理水平&#xff0c;确保施工安全提高施工质量。实现对人、机、料、法、环的全方位实时监控&#xff0c;变被动“监督”为主动“监控”。 一、建设背景 施工现场有数量多、分布广&#xff0c;总部统…...

编程日记 2023/12/2 21:15:36

熬夜会秃头——beta冲刺Day2

这个作业属于哪个课程2301-计算机学院-软件工程社区-CSDN社区云这个作业要求在哪里团队作业—beta冲刺事后诸葛亮-CSDN社区这个作业的目标记录beta冲刺Day2团队名称熬夜会秃头团队置顶集合随笔链接熬夜会秃头——Beta冲刺置顶随笔-CSDN社区 目录 一、团队成员会议总结 1、成员…...

编程日记 2023/12/2 21:14:35

【linux】信号——信号保存+信号处理

信号保存信号处理 1.信号保存1.1信号其他相关概念1.2信号在内核中的表示 2.信号处理2.1信号的捕捉流程2.2sigset_t2.3信号集操作函数2.4实操2.5捕捉信号的方法 3.可重入函数4.volatile5.SIGCHLD信号 自我名言&#xff1a;只有努力&#xff0c;才能追逐梦想&#xff0c;只有努力…...

编程日记 2023/12/2 21:13:34

雷军：我的程序人生路

今天有朋友发给我一篇我在20年前在BBS上写的帖子。那还是1996年&#xff0c;我们通过电话线拨号连接到西点BBS上飙帖子玩的年代。那是一个互联网混沌初开的年代&#xff0c;那是一个BBS和Email几乎主宰了全部互联网的年代&#xff0c;那是一个青春的理想和热血沸腾的年代。 我…...

编程日记 2023/12/2 21:11:33

Linux 磁盘分区处理

最近实施过程中遇到客户提供给我们的服务器操作系统和Docke容器环境都已经安装完成&#xff0c;但磁盘的分区没有进行整理好。磁盘总共270G&#xff0c;系统安装分配了60G&#xff0c;剩余未创建分配需要处理。由于分区情况每家不一样&#xff0c;但大致流程都是相同的&#xf…...

编程日记 2023/12/2 21:10:31

利用ogr2ogr从PostGIS中导出/导入Tab/Dxf/Geojson等格式数据

ogr2ogr Demo Command 先查看下当前gdal支持的全部格式&#xff0c;部分gdal版本可能不支持PostGIS。 如出现PostgreSQL表名支持。 #全部支持的格式 ogrinfo --formats | sort #AVCBin -vector- (rov): Arc/Info Binary Coverage #AVCE00 -vector- (rov): Arc/Info E00 (ASC…...

编程日记 2023/12/2 21:08:30

【深度优先】LeetCode1932:合并多棵二叉搜索树

作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你 n 个 二叉搜索树的根节点 &#xff0c;存储在数组 trees 中&#xff08;下标从 0 开始&#xff09;&#xff0c;对应 n 棵不同的二叉搜索树。trees 中的每棵二叉搜索树 最多有 3 个节点 &#xff0…...

编程日记 2023/12/2 21:06:28

monorepo多项目管理主流实现方式：1.learn + yarn/npm workspace 2.pnpm

npm域级包 随着npm包越来越多&#xff0c;而且包名也只能是唯一的&#xff0c;如果一个名字被别人占了&#xff0c;那你就不能再使用这个名字&#xff1b;假设我想要开发一个utils包&#xff0c;但是张三已经发布了一个utils包&#xff0c;那我的包名就不能叫utils了&#xff…...

编程日记 2023/12/2 21:05:26

【斗罗二】暗杀霍雨浩行动，马小桃霸气回击，江楠楠首秀武魂兔兔

Hello,小伙伴们&#xff0c;我是拾荒君。 《斗罗大陆Ⅱ绝世唐门》第25集更新了&#xff01;和小伙伴们一样&#xff0c;一更新&#xff0c;拾荒君就急不可待地观看这一集。故事情节高潮迭起&#xff0c;尤其是霍雨浩与王冬面对六名杀手的惊险场景&#xff0c;真是让人心跳加速…...

编程日记 2023/12/2 21:03:24

[ 蓝桥杯Web真题 ]-年度明星项目

目录 引入 介绍 准备 目标 效果 规定 思路 知识补充 解答参考 引入 hello&#xff0c;大家好&#xff01;我注意到了之前发的一篇蓝桥杯Web应用开发的文章是关注度最高的&#xff0c;可能大部分关注我的小伙伴对蓝桥杯Web应用开发比较感兴趣&#xff0c;或者想要参加…...

编程日记 2023/12/2 21:01:22

Maven终端打包时报Unknown lifecycle phase “.test.skip=true“

错误实例代码 mvn clean package -Dmaven.test.skiptrue 再windows的cmd窗口进行项目打包&#xff0c;需要将参数用英文符号包裹起来“ ” 【正确的实例】&#xff1a;mvn clean package ’-Dmaven.test.skiptrue‘ PS D:\BaiduNetdiskDownload\qian\Springboot-Vue\bi…...

编程日记 2023/12/2 21:00:22

Linux MIPI 调试中常见的问题

一、概述 做嵌入式工作的小伙伴知道&#xff0c;有时候程序编写没有调试过程中费时&#xff0c;之间笔记里有 MIPI 摄像头驱动开发的过程&#xff0c;有需要的小伙伴可以参考&#xff1a;Linux RN6752 驱动编写。而我也是第一次琢磨 MIPI 协议&#xff0c;其中有很多不明白的地…...

编程日记 2023/12/2 20:57:18

使用极限网关助力 ES 集群无缝升级、迁移上/下云

在工作中大家可能会遇到以下这些场景&#xff1a; 自建 ES 集群需要平滑迁移到 XX 云&#xff1b;从 XX 云将 ES 集群迁移到自建机房&#xff1b;ES 集群进行跨版本升级&#xff0c;同时保留回退能力&#xff1b; 这些场景往往都还有个共同的需求&#xff1a;迁移过程要保证业…...

编程日记 2023/12/2 20:56:17

RedisTemplate的配置和讲解以及和StringRedisTemplate的区别

本文主要讲redisTempalte的几种常用的序列化方式 string&#xff0c;我们大部分情况下都希望存入redis的数据可读性强一些&#xff0c;并且value也不总是一个规则的类型&#xff0c;所以这里也是不用json序列化的原因&#xff0c;可以更自由方便&#xff0c;下边提供配置方法 …...

编程日记 2023/12/2 20:52:11

在oracle中的scn技术

SCN可以说是Oracle中一个很基础的部分&#xff0c;但同时它也是一个很重要的。它是系统中维持数据的一致性和顺序恢复的重要标志&#xff0c;是数据库非常重要的一种数据结构。 转载&#xff1a;深入剖析 - Oracle SCN机制详细解读 - 知乎 (zhihu.com)https://zhuanlan.zhihu.…...

编程日记 2023/12/2 20:51:10

LINUX 嵌入式C编程--信号编程

基本概念 信号是事件发生时对进程的通知机制&#xff0c;也可以把它称为软件中断。信号与硬件中断的相似之处在于能够打断程序当前执行的正常流程&#xff0c;其实是在软件层次上对中断机制的一种模拟。信号提供了一种处理异步事件的方法。 信号目的 **信号的目的是用来通信…...

编程日记 2023/12/2 20:50:08

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/11/4 16:29:30

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

【论文阅读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/2 9:30:27

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/11/2 8:56:14

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/10/28 0:09:57

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/10/31 11:06:40

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2025/10/31 7:39:10