WEB APIs (5)
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对象…...
物联网常见协议篇
在物联网环境中，物联网协议承担着关键作用，而新手了解物联网协议如传输协议、通讯协议和行业协议等。 一、物联网协议 物联网协议是物联网环境中的关键组成部分，它承担着设备间通信和数据传输的重要任务。这些协议根据其作用的不同ÿ…...
Kubernetes-1
学习Kubernetes第一天 k8s-11、什么是Kubernetes2、配置Kubernetes2.1、准备三台全新的虚拟机2.2、关闭防火墙和SElinux2.3、修改主机名2.4、升级操作系统(三台一起操作)2.5、配置主机hosts文件，相互之间通过主机名互相访问2.6、配置master和node之间的免密通道2.7、…...
SpringMVC框架②
三、RequestMapping注解 3、RequestMapping注解的value属性 必须设置 发送一个请求最直观的表示方式就是一个请求路径 altenter 进入接口方法 再用 alte7 查看里面的属性 value值可以是数组 value{"test","test1"} 只满足任何一个请求地址就会调用此方…...
springboot230基于Spring Boot在线远程考试系统的设计与实现
在线远程考试系统设计与实现 摘 要 信息数据从传统到当代，是一直在变革当中，突如其来的互联网让传统的信息管理看到了革命性的曙光，因为传统信息管理从时效性，还是安全性，还是可操作性等各个方面来讲，遇到…...
盘点：国家智能算力中心
文章目录 1. Main2. My thoughtsReference 1. Main 按照《中国算力白皮书（2022年）》的定义，算力主要分为四部分：通用算力、智能算力、超算算力、边缘算力。通用算力以CPU芯片输出的计算能力为主；智能算力以GPU、FPGA、…...
【C++】7-2 寻找完美数 分数 10
7-2 寻找完美数 分数 10 全屏浏览 切换布局 作者 李祥 单位 湖北经济学院 所有真因子之和小于其本身的数称为亏数。 如：4 的真因子 1、2 之和为 3，小于 4，是亏数。 所有真因子之和大于其本身的数称为盈数。 如：12 的真因子 1…...
基于Mahout实现K-Means聚类
需求分析 需要对数据集进行预处理，选择合适的特征进行聚类分析，确定聚类的数量和初始中心点，调用Mahout提供的K-Means算法进行聚类计算，评估聚类结果的准确性和稳定性。同时，需要对Mahout的使用和参数调优进行深入学习…...
科技的成就（五十七）
535、Machine Learning "1959 年 7 月，塞缪尔首创 Machine Learning 一词。塞缪尔在“Some Studies in Machine Learning Using theGame of Checkers”一文中给 Machine Learning 下了个非正式定义：没有明确编程指令的情况下，能让计算机…...
动态IP代理技术在网络爬虫中的实际使用
目录 一、动态IP代理技术概述 二、动态IP代理技术的优势 三、动态IP代理技术的实际应用 四、注意事项 五、案例分析 六、结论 随着互联网的迅猛发展，网络爬虫成为了获取信息、分析数据的重要工具。然而，在进行大规模爬取时，爬虫常常面临…...
计算机网络：深入探索HTTP
引言： HTTP，全称超文本传输协议（Hypertext Transfer Protocol），是互联网上数据通信的基础。它定义了客户端（如浏览器）和服务器之间如何交互和传输数据。HTTP最初是为了支持Web浏览而设计的&…...
Netty（1）nio
一. NIO 基础 non-blocking io 非阻塞 IO 1. 三大组件 1.1 Channel & Buffer channel 有一点类似于 stream，它就是读写数据的双向通道，可以从 channel 将数据读入 buffer，也可以将 buffer 的数据写入 channel，而之前的 st…...
1.3 vue ui框架-element-ui框架
1 前言 ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。 ElementUI官网 https://element.eleme.io 2 安装 运行命令 cnpm i element-ui -S -S表示只在该项目下安装，不是全局安…...
关于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…...
QML学习之Text
文本显示是界面开发中的重要内容，在Qt Quick模块中提供了 Text 项来进行文本的显示，其中可以使用 font 属性组对文本字体进行设置： font.bold：是否加粗，取值为true或false font.capitalization：大写策略&a…...
轮转数组（元素位置对调、数据的左旋、右旋）
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年1月18日，易我科技新办公区乔迁庆典在热烈而喜庆的氛围中隆重举行。新办公区的投入使用，标志着易我科技将以崭新姿态迈向新的发展阶段。 ▲ 易我科技新办公区 随着公司业务的不断发展和壮大，为了更好地适应公司发展的需要，…...
多个地区地图可视化
1. 配置Json文件 1.1 获得每个省份的json数据 打开 阿里云数据可视化平台 主页。 在搜索框中输入所需省份。 将json文件下载到本地。 1.2 将各省份的json数据进行融合 打开 geojson.io 主页 点击 open，上传刚刚下载的 json 文件，对多个省份不断…...
学习使用paddle来构造hrnet网络模型
1、首先阅读了hrnet的网络结构分析，了解到了网络构造如下： 参考博文姿态估计之2D人体姿态估计 - （HRNet）Deep High-Resolution Representation Learning for Human Pose Estimation（多家综合）-CSDN博客 最…...
Redis 多线程操作同一个Key如何保证一致性？
单线程模型：Redis 是单线程模型的，它通过一个事件循环来处理所有客户端请求，这意味着 Redis 在任何时刻只会处理一个请求，从而避免了并发访问同一个 Key 的问题。这种设计保证了数据的一致性。 乐观锁（Watchÿ…...
ICLR 2025 技术趋势解码：大模型优化与生成式AI的协同演进
1. 大模型优化的三大技术路线 过去一年我测试了超过20种大模型优化方案，发现当前技术演进主要集中在三个方向：参数压缩、训练加速和推理优化。先说最让我惊喜的轻量化技术，去年帮某电商客户把70B参数的客服模型压缩到3.8G大小，在移…...
配置嵌入式Linux系统从NFS启动
配置嵌入式Linux系统从NFS启动 嵌入式Linux开发时，需要频繁将开发的程序下载到嵌入式电路板上运行，尽管采用各种文件传输工具能比较方便的再宿主机和开发电路板之间进行文件传输，但每次操作需要操作略显繁琐。此处记录在开发中经常使用到的嵌…...
指针精要：从入门到精通，嵌入式开发学习日志32——stm32之PWM。
指针的基本概念 指针是编程中用于存储内存地址的变量，它指向另一个变量的位置。通过指针可以直接访问或修改内存中的数据，提升程序的灵活性和效率。 在C/C中，指针的声明方式为： int *ptr; // 声明一个整型指针指针的类型决定了…...
别再只用Speedtest了！自建LibreSpeed测速站，监控家庭宽带/公司内网真实表现
自建网络测速站：用LibreSpeed打造精准带宽监控系统 每次看到运营商宣传的"千兆宽带"，你是否怀疑过实际使用中根本达不到承诺速度？公共测速网站的结果总让人将信将疑——它们可能被ISP特殊优化，或是受限于服务器位置。更…...
RT-Thread 4.1.0内核更新与静态HOOK机制解析
1. RT-Thread 4.1.0内核更新概览RT-Thread作为国内领先的物联网实时操作系统，其4.1.0版本的发布标志着内核稳定性和功能性又迈上了一个新台阶。作为一名长期使用RT-Thread进行嵌入式开发的工程师，我发现这次更新虽然看似改动不大，但每个特性都…...
【优化轨迹】基于融合粒子群算法的纤维置换机械臂轨迹优化附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。👇 关注我领取海量matlab电子书和数学建模资料🍊个人信条：格物致知,完整Matl…...
TP4054锂电池充电管理库原理与嵌入式工程实践
1. TP4054线性锂离子电池充电管理库深度解析与工程实践TP4054是一款由南京拓微电子（Top Power）推出的高集成度、单节锂离子/锂聚合物电池专用线性充电管理芯片。其典型应用电路仅需极少外围器件，支持恒流/恒压（CC/CV）充…...
快速原型：用快马ai一键生成openclaw在mac上的自动化安装脚本
最近在Mac上折腾OpenClaw这个开源工具时，发现它的安装过程对新手确实不太友好。作为一个经常需要快速验证工具可行性的开发者，我尝试用InsCode(快马)平台来生成自动化安装脚本，整个过程意外地顺畅。下面分享下我的实践心得： 环境检…...
内容管理系统 CMS 发展史：从静态建站到 2026 智能一体化协同平台
内容管理系统（CMS）作为支撑互联网内容生态的核心基础软件，自诞生以来已走过 30 余年历程。它始终紧跟技术浪潮与市场需求，从最初简单的静态页面制作工具，逐步演进为集内容管理、低代码开发、智能分析、多端分发于一体的…...
LabVIEW发动机性能评估与故障诊断
基于 LabVIEW 的发动机性能评估与故障诊断系统采用模块化架构，以 PXI 总线为硬件核心，软件层通过图形化编程实现多维度数据处理与分析。硬件部分整合振动、压力、转速等多类型传感器，经信号调理模块与 PXI 数据采集卡完成信号转换，…...