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ÿ…...
逻辑回归：给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
Caliper 配置文件解析：fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。 许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么，为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...
TCP/IP 网络编程 | 服务端 客户端的封装
设计模式 文章目录 设计模式一、socket.h 接口（interface）二、socket.cpp 实现（implementation）三、server.cpp 使用封装（main 函数）四、client.cpp 使用封装（main 函数）五、退出方法…...
医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor
1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...
跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践
在电商行业蓬勃发展的当下，多平台运营已成为众多商家的必然选择。然而，不同电商平台在商品数据接口方面存在差异，导致商家在跨平台运营时面临诸多挑战，如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...
FTXUI::Dom 模块
DOM 模块定义了分层的 FTXUI::Element 树，可用于构建复杂的终端界面，支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...
Linux入门课的思维导图
耗时两周，终于把慕课网上的Linux的基础入门课实操、总结完了！ 第一次以Blog的形式做学习记录，过程很有意思，但也很耗时。 课程时长5h，涉及到很多专有名词，要去逐个查找，以前接触过的概念因为时…...