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

WEB APIs (5)

news 2025/9/25 18:09:59

window对象

BOM（浏览器对象模型）

其为js操作浏览器提供了方法

window对象是一个全局变量，是BOM树根节点

BOM的属性和方法都是window的，如document、console.log()等

var定义在全局全局作用域中的变量、函数都会变成window对象属性和方法

定时器-延时函数

js内置让代码延迟执行的函数，setTimeout

语法：

setTimeout（回调函数，等待毫秒数）

仅执行一次

setTimeout返回的也是id

清除延时函数：

例子：广告自动消失

1.设置延时函数

2.隐藏元素

js执行机制

js一大特点只能是单线程；同一时间只能干一件事

js允许多线程（通过浏览器处理），因此出现同步与异步

同步任务

在主线程上执行，形成一个执行栈

异步任务

通过回调函数实现

三种类型：

普通事件，click、resize等

资源加载，load，error等

定时器，setInterval,setTimeout等

异步任务相关添加到任务队列

主线程执行完毕，查询任务队列，取出一个任务，推入主线程处理，重复动作

由于主线程不断地重复获得任务、执行任务，再获得任务、执行任务这种机制成为事件循环（event loop）

location对象

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

常用属性：

location.href属性获取完整的URL地址，对其赋值进行页面跳转

location.search属性获取地址中携带的参数，？后面部分

location.hash属性获取地址中携带的哈希值，#后面部分

常用于不刷新页面，显示不同页面

location.reload()用于刷新页面，location.reload(true)表示强制刷新

navigator对象

记录浏览器自身相关信息

属性方法

通过userAgent检测浏览器版本及平台

跳转的代码！

//检测userAgent（浏览器信息）(function){
const userAgent= navigator.userAgent
//验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
//如果是Android或Phone,则跳转至移动站点
if (android || iphone){
location.href = 'http://m.itcast.cn'
}
})();

history对象

主要管理历史纪录，该对象与浏览器地址栏的操作相对应，前进、后退、历史记录等。

history.back()<=>退后

history.forward()<=>前进

history.go(n)<=>前进n个页面

本地存储

数据储存在用户浏览器中，刷新不会丢失（永久性）

特性：

可以多窗口共享（同一浏览器）

以键值对形式存储使用

本地存储得到的只能是字符串

语法：

存储数据

localStorage.setItem('key',value)

添加会在其中显示

获取数据

localStorage.getItem('key')

删除数据

localStorage.removeItem('key')

改数据

只需要再写一遍localStorage.setItem('key',value) 改变value值即可

本地存储处理复杂数据类型

本地只能储存字符型，无法储存复杂数据类型

需要将复杂数据类型转化成JSON字符串，在储存到本地

语法：

JSON.stringfy()

JSON.parse()

将JSON字符串转换为对象

数组的map以及join方法

map（也称映射）遍历数组，处理数据，返回新的数组

数组join方法，将数组转化为字符串

参数是什么就用什么隔开

特殊的：

本地储存的案例：

涉及表单提交中 bottom与submit的关系

submit：默认form提交

bottom：响应用户自定义事件（可以监听）

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.box {width: 1000px;height: 100%;margin: 100px auto;text-align: center;}h1 {margin: 40px;}h2 {margin-top: 40px;}input {width: 70px;}button {margin-left: 10px;background-color: #451af1;color: #fff;border-radius: 4px;}table {margin: 0 auto;border: #c8c7ca;width: 600px;}td {padding: 5px;}thead {background-color: #88cbf6;font-size: 14px;}a {color: white;display: inline-block;width: 45px;height: 15px;line-height: 15px;background-color: #eb6e07;cursor: pointer;}.title {width: 600px;height: 30px;line-height: 30px;padding-right: 15px;margin: 10px auto;text-align: right;}.title span {display: inline-block;color: #f26934;}</style>
</head><body><div class="box"><h1>新增学员</h1><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname">年龄：<input type="text" class="age" name="age">性别：<input type="text" class="sex" name="sex">薪资：<input type="text" class="salary" name="salary">就业城市：<select class="city" name="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="成都">成都</option></select><button class="add">录入</button></form><h2>就业榜</h2><div class="title">共有数据<span>0</span>条</div><table border="1" align="center" cellpadding="0" cellspacing="0"><thead><tr><td>学号</td><td>姓名</td><td>年龄</td><td>性别</td><td>薪资</td><td>就业城市</td><td>操作</td></tr></thead><tbody></tbody></table></div><script>const info = document.querySelector('.info')const uname = document.querySelector('.uname')const age = document.querySelector('.age')const sex = document.querySelector('.sex')const salary = document.querySelector('.salary')const city = document.querySelector('.city')const button = document.querySelector('.add')const number = document.querySelector('.title span')const tbody = document.querySelector('tbody')const names = document.querySelectorAll('[name]')const arr = []function render() {const arr1 = arr.map((item,index) => {return `<tr><td>${item.Id}</td><td>${item.uname}</td><td>${item.age}</td><td>${item.sex}</td><td>${item.salary}</td><td>${item.city}</td><td><a href="javascript:" data-id=${index}>delete</a></td></tr>`})tbody.innerHTML = arr1.join('')number.innerHTML = arr1.length}info.addEventListener('submit', function (e) {e.preventDefault()for (let i = 0; i < names.length; i++) {if (names[i].value === '') {return alert('数据不能为空！')}}arr.push({Id: arr.length,uname: uname.value,age: age.value,sex: sex.value,salary: salary.value,city: city.value,time: new Date().toDateString()})render()this.reset()localStorage.setItem('data', JSON.stringify(arr))})tbody.addEventListener('click',function(e){if (e.target.tagName==='A' && confirm('是否删除？')){arr.splice(e.target.dataset.id,1)render()localStorage.setItem('data', JSON.stringify(arr))}})</script></body></html>

WEB APIs (5)

window对象 BOM（浏览器对象模型） 其为js操作浏览器提供了方法 window对象是一个全局变量，是BOM树根节点 BOM的属性和方法都是window的，如document、console.log()等 var定义在全局全局作用域中的变量、函数都会变成window对象…...

编程日记 2024/3/4 22:46:52

物联网常见协议篇

在物联网环境中，物联网协议承担着关键作用，而新手了解物联网协议如传输协议、通讯协议和行业协议等。一、物联网协议物联网协议是物联网环境中的关键组成部分，它承担着设备间通信和数据传输的重要任务。这些协议根据其作用的不同&#xff…...

编程日记 2024/3/4 22:45:50

Kubernetes-1

学习Kubernetes第一天 k8s-11、什么是Kubernetes2、配置Kubernetes2.1、准备三台全新的虚拟机2.2、关闭防火墙和SElinux2.3、修改主机名2.4、升级操作系统(三台一起操作)2.5、配置主机hosts文件，相互之间通过主机名互相访问2.6、配置master和node之间的免密通道2.7、…...

编程日记 2024/3/4 22:44:49

SpringMVC框架②

三、RequestMapping注解 3、RequestMapping注解的value属性必须设置发送一个请求最直观的表示方式就是一个请求路径 altenter 进入接口方法再用 alte7 查看里面的属性 value值可以是数组 value{"test","test1"} 只满足任何一个请求地址就会调用此方…...

编程日记 2024/3/4 22:43:48

springboot230基于Spring Boot在线远程考试系统的设计与实现

在线远程考试系统设计与实现摘要信息数据从传统到当代，是一直在变革当中，突如其来的互联网让传统的信息管理看到了革命性的曙光，因为传统信息管理从时效性，还是安全性，还是可操作性等各个方面来讲，遇到…...

编程日记 2024/3/4 22:42:47

盘点：国家智能算力中心

文章目录 1. Main2. My thoughtsReference 1. Main 按照《中国算力白皮书（2022年）》的定义，算力主要分为四部分：通用算力、智能算力、超算算力、边缘算力。通用算力以CPU芯片输出的计算能力为主；智能算力以GPU、FPGA、…...

编程日记 2024/3/4 22:41:46

【C++】7-2 寻找完美数分数 10

7-2 寻找完美数分数 10 全屏浏览切换布局作者李祥单位湖北经济学院所有真因子之和小于其本身的数称为亏数。如：4 的真因子 1、2 之和为 3，小于 4，是亏数。所有真因子之和大于其本身的数称为盈数。如：12 的真因子 1…...

编程日记 2024/3/4 22:39:44

基于Mahout实现K-Means聚类

需求分析需要对数据集进行预处理，选择合适的特征进行聚类分析，确定聚类的数量和初始中心点，调用Mahout提供的K-Means算法进行聚类计算，评估聚类结果的准确性和稳定性。同时，需要对Mahout的使用和参数调优进行深入学习…...

编程日记 2024/3/4 22:36:41

科技的成就（五十七）

535、Machine Learning "1959 年 7 月，塞缪尔首创 Machine Learning 一词。塞缪尔在“Some Studies in Machine Learning Using theGame of Checkers”一文中给 Machine Learning 下了个非正式定义：没有明确编程指令的情况下，能让计算机…...

编程日记 2024/3/4 22:35:40

动态IP代理技术在网络爬虫中的实际使用

目录一、动态IP代理技术概述二、动态IP代理技术的优势三、动态IP代理技术的实际应用四、注意事项五、案例分析六、结论随着互联网的迅猛发展，网络爬虫成为了获取信息、分析数据的重要工具。然而，在进行大规模爬取时，爬虫常常面临…...

编程日记 2024/3/4 22:31:36

计算机网络：深入探索HTTP

引言： HTTP，全称超文本传输协议（Hypertext Transfer Protocol），是互联网上数据通信的基础。它定义了客户端（如浏览器）和服务器之间如何交互和传输数据。HTTP最初是为了支持Web浏览而设计的&…...

编程日记 2024/3/4 22:30:35

Netty（1）nio

一. NIO 基础 non-blocking io 非阻塞 IO 1. 三大组件 1.1 Channel & Buffer channel 有一点类似于 stream，它就是读写数据的双向通道，可以从 channel 将数据读入 buffer，也可以将 buffer 的数据写入 channel，而之前的 st…...

编程日记 2024/3/4 22:25:30

1.3 vue ui框架-element-ui框架

1 前言 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。 ElementUI官网 https://element.eleme.io 2 安装运行命令 cnpm i element-ui -S -S表示只在该项目下安装，不是全局安…...

编程日记 2024/3/4 22:21:25

关于MediaEval数据集的Dataset构建（Text部分-使用PLM BERT）

import random import numpy as np import pandas as pd import torch from transformers import BertModel,BertTokenizer from tqdm.auto import tqdm from torch.utils.data import Dataset import re """参考Game-On论文""" ""&qu…...

编程日记 2024/3/4 22:20:24

QML学习之Text

文本显示是界面开发中的重要内容，在Qt Quick模块中提供了 Text 项来进行文本的显示，其中可以使用 font 属性组对文本字体进行设置： font.bold：是否加粗，取值为true或false font.capitalization：大写策略&a…...

编程日记 2024/3/4 22:14:18

轮转数组（元素位置对调、数据的左旋、右旋）

189. 轮转数组给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: …...

编程日记 2024/3/4 22:12:16

喜迎乔迁，开启新章 ▏易我科技新办公区乔迁庆典隆重举行

2024年1月18日，易我科技新办公区乔迁庆典在热烈而喜庆的氛围中隆重举行。新办公区的投入使用，标志着易我科技将以崭新姿态迈向新的发展阶段。 ▲ 易我科技新办公区随着公司业务的不断发展和壮大，为了更好地适应公司发展的需要，…...

编程日记 2024/3/4 22:07:12

多个地区地图可视化

1. 配置Json文件 1.1 获得每个省份的json数据打开阿里云数据可视化平台主页。在搜索框中输入所需省份。将json文件下载到本地。 1.2 将各省份的json数据进行融合打开 geojson.io 主页点击 open，上传刚刚下载的 json 文件，对多个省份不断…...

编程日记 2024/3/4 22:05:09

学习使用paddle来构造hrnet网络模型

1、首先阅读了hrnet的网络结构分析，了解到了网络构造如下： 参考博文姿态估计之2D人体姿态估计 - （HRNet）Deep High-Resolution Representation Learning for Human Pose Estimation（多家综合）-CSDN博客最…...

编程日记 2024/3/4 22:03:07

Redis 多线程操作同一个Key如何保证一致性？

单线程模型：Redis 是单线程模型的，它通过一个事件循环来处理所有客户端请求，这意味着 Redis 在任何时刻只会处理一个请求，从而避免了并发访问同一个 Key 的问题。这种设计保证了数据的一致性。乐观锁（Watch&#xff…...

编程日记 2024/3/4 21:57:00

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/9/25 9:02:56

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

生成 Git SSH 证书

🔑 1. 生成 SSH 密钥对在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...

编程新知 2025/9/18 11:31:13

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/9/8 23:17:56

数据链路层的主要功能是什么

数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装封装： 将网络层下发…...

编程新知 2025/6/16 23:36:50

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/9/2 19:31:47