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ÿ…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...