2024年 前端JavaScript Web APIs 第五天 笔记

5.1-BOM和延迟函数setTimeout

5.2-事件循环eventloop

1-》 3 -》2

1-》 3 -》2

5.3-location对象

案例:5秒钟之后自动跳转页面

<body><a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a><script>// 1. 获取元素const a = document.querySelector('a')// 2.开启定时器// 3. 声明倒计时变量let num = 5let timerId = setInterval(function () {num--a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`// 如果num === 0 则停止定时器,并且完成跳转功能if (num === 0) {clearInterval(timerId)// 4. 跳转  location.hreflocation.href = 'http://www.itcast.cn'}}, 1000)</script>
</body>

5.4-navigator对象和histroy对象

5.5-本地存储localstorage

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

5.7-综合案例-读取本地存储数据

5.8-数组map和join方法

5.9-综合案例-渲染模块制作

5.10-综合案例-录入模块制作

5.11-综合案例-删除模块制作以及学

5.12-综合案例 原码


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生就业统计表</title><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="css/index.css" />
</head><body><h1>学生就业统计表</h1><form class="info" autocomplete="off"><input type="text" class="uname" name="uname" placeholder="姓名" /><input type="text" class="age" name="age" placeholder="年龄" /><input type="text" class="salary" name="salary" placeholder="薪资" /><select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select><select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add"><i class="iconfont icon-tianjia"></i>添加</button></form><div class="title">共有数据<span>0</span>条</div><table><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>录入时间</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1</td><td>迪丽热巴</td><td>23</td><td>女</td><td>12000</td><td>北京</td><td>2099/9/9 08:08:08</td><td><a href="javascript:"><i class="iconfont icon-shanchu"></i>删除</a></td></tr> --></tbody></table><script>// 参考数据const initData = [{stuId: 1,uname: '迪丽热巴',age: 22,salary: '12000',gender: '女',city: '北京',time: '2099/9/9 08:08:08'}]// localStorage.setItem('data', JSON.stringify(initData))// 1. 渲染业务// 1.1 先读取本地存储的数据// (1). 本地存储有数据则记得转换为对象然后存储到变量里面,后期用于渲染页面// (2). 如果没有数据,则用 空数组来代替const arr = JSON.parse(localStorage.getItem('data')) || []console.log(arr)// 1.2 利用map和join方法来渲染页面const tbody = document.querySelector('tbody')function render() {// (1). 利用map遍历数组,返回对应tr的数组const trArr = arr.map(function (ele, index) {return `<tr><td>${ele.stuId}</td><td>${ele.uname}</td><td>${ele.age}</td><td>${ele.gender}</td><td>${ele.salary}</td><td>${ele.city}</td><td>${ele.time}</td><td><a href="javascript:" data-id="${index}"><i class="iconfont icon-shanchu"></i>删除</a></td></tr>`})console.log(trArr)// (2). 把数组转换为字符串 join// (3). 把生成的字符串追加给tbody tbody.innerHTML = trArr.join('')// 显示共计有几条数据document.querySelector('.title span').innerHTML = arr.length}render()// 2. 新增业务const info = document.querySelector('.info')const uname = document.querySelector('.uname')const age = document.querySelector('.age')const salary = document.querySelector('.salary')const gender = document.querySelector('.gender')const city = document.querySelector('.city')// 2.1 form表单注册提交事件,阻止默认行为info.addEventListener('submit', function (e) {e.preventDefault()// 2.2 非空判断if (!uname.value || !age.value || !salary.value) {return alert('输入内容不能为空')}// 2.3 给 arr 数组追加对象,里面存储 表单获取过来的数据arr.push({// 处理 stuId:数组最后一条数据的stuId + 1      stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,uname: uname.value,age: age.value,salary: salary.value,gender: gender.value,city: city.value,time: new Date().toLocaleString()})// 2.4 渲染页面和重置表单(reset()方法)render()this.reset() // 重置表单// 2.5 把数组重新存入本地存储里面,记得转换为JSON字符串存储localStorage.setItem('data', JSON.stringify(arr))})// 3. 删除业务// 3.1 采用事件委托形式,给 tbody 注册点击事件tbody.addEventListener('click', function (e) {// 判断是否点击的是删除按钮  A 链接if (e.target.tagName === 'A') {// alert(11)// 3.2 得到当前点击链接的索引号。渲染数据的时候,动态给a链接添加自定义属性例如 data-id="0"console.log(e.target.dataset.id)// 确认框 确认是否要真的删除if (confirm('您确定要删除这条数据吗?')) {// 3.3 根据索引号,利用 splice 删除数组这条数据arr.splice(e.target.dataset.id, 1)// 3.4 重新渲染页面 render()// 3.5 把最新 arr 数组存入本地存储localStorage.setItem('data', JSON.stringify(arr))}}})</script>
</body></html>

--------- 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/766520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库测试案例20240322-binlog_format为row binlog日志分析,主备数据不一致会导致复制出问题

1 测试概述 master-1&#xff0c;master-2表数据test如下&#xff1a; 9:26: [mytest]> select *From test; ---------- | id | name | ---------- | 10 | 123 | ---------- 1 row in set (0.00 sec) 2 在主库将数据删除导致数据不一致 09:26: [mytest]> set sql_…

git的实际应用场景

本文章的场景主要来源于实际工作&#xff0c;用于记载回看&#xff1b;持续更新&#xff0c;最后更新日期&#xff1a;2024-03-23软件&#xff1a;Git BASH、GitK、Git GUI三者配合使用 1、git reset < file > 作用&#xff1a;把文件从暂存区状态重置为工作区状态&…

对象操作篇

文章目录 9.1 dir()9.2 hash()9.3 help()9.4 id()9.5 type() 9.1 dir() dir() 是 Python 中的一个内置函数&#xff0c;用于返回一个对象的所有属性和方法的列表。当dir()不带参数调用时&#xff0c;它会返回当前作用域中的变量、方法和定义的类型列表。如果dir()带有一个参数…

从零开始学HCIA之网络自动化02

1、Python 是一种解释型&#xff08;即不需要编译环节&#xff09;的、面向对象&#xff08;即支持面向对象的风格或代码&#xff09;的、动态数据类型的高级程序设计语言。对于所谓的高级程序设计语言&#xff0c;你可以理解为“同声传译”的过程。 2、Python标准库很庞大&am…

Shut down, sleep, or hibernate your PC 关闭、睡眠或休眠

最近一段时间没有整服务器了~自己开始捉摸18年买的笔记本-x280&#xff0c;除了发现usb type c和thunderbolt 3接口的不一样外&#xff0c;也开始研究这个待机的功能了~找了官方文档&#xff0c;做个简易的翻译&#xff0c;给大家一起看看学习把。 官方文档URL&#xff1a; S…

Docker搭建LNMP环境实战(02):Win10下安装VMware

实战开始&#xff0c;先安装 VMware 虚拟机。话不多说&#xff0c;上手就干&#xff01; 1、基本环境检查 1.1、本机Bios是否支持虚拟化 进入&#xff1a;任务管理器- 性能&#xff0c;查看“虚拟化”是否启用&#xff0c;如果已启用&#xff0c;则满足要求&#xff0c;如果未…

【Swagger】接口文档生成

文章目录 一、前后端分离开发流程二、YApi导入接口文档三、Swagger3.1 介绍3.2 使用步骤3.2.1 导入 knife4j 的maven依赖3.2.2 在配置类中加入 knife4j 相关配置3.2.3 配置类中设置静态资源映射3.2.4 访问测试 3.3 常用注解3.4 全局参数设置 四、YApi 与 Swagger 一、前后端分离…

Day18:LeedCode 513.找树左下角的值 112. 路径总和 106.从中序与后序遍历序列构造二叉树

513. 找树左下角的值 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1 思路:出该二叉树的 最底层 最左边 节点的值找出深度最大的第一个结点(左结点先遍历) 方法一…

一个单生产-多消费模式下无锁方案(ygluu/卢益贵)

一个单生产-多消费模式下无锁方案 ygluu/卢益贵 关键词&#xff1a;生产者-消费者模型、无锁队列、golang、RWMutex 本文介绍一个“单生产(低频)-多消费”模式下的无锁哈希类方案&#xff0c;这个方案的性能优于golang的RWMutex&#xff0c;因为它永远不会因为“写”而导致与…

i2c-tools基本用法

一. 前言 前面调试一个I2C设备&#xff0c;用到了i2c-tools&#xff0c;觉得是一个调试I2C不错的工具&#xff0c;本文对i2c-tools的基本用法做一些介绍。i2c-tools是一些控制2C接口工具的集合&#xff0c;其中包括i2cdetect&#xff0c;i2cdump&#xff0c;i2cget&#xff0c;…

亚稳态及其解决办法

异步电路 亚稳态 亚稳态亚稳态的产生原因什么是同步异步信号怎么消除亚稳态 亚稳态 在数字电路中&#xff0c;每一位数据不是1&#xff08;高电平&#xff09;就是0&#xff08;低电平&#xff09;。当然对于具体的电路来说&#xff0c;并非1&#xff08;高电平&#xff09;就是…

ECMAScript与JavaScript辨析:标准与实现之辨

ECMAScript与JavaScript辨析&#xff1a;标准与实现之辨 目录 ECMAScript与JavaScript辨析&#xff1a;标准与实现之辨 一、引言 二、ECMAScript&#xff1a;脚本编程语言的标准蓝图 三、JavaScript&#xff1a;基于ECMAScript的实现 四、ECMAScript与JavaScript的交互关系及…

Notepad++ 如何调整显示字面大小

在 Notepad 上&#xff0c;可以使用 ctrl 加上鼠标的左键来滚动来进行调整。 如何恢复默 可以使用 Ctrl 加数字键盘上的 / 键 来恢复默认设置。 当然也可以通过菜单栏上 view 菜单下的 Zoom 选项。 上面的界面中可以看到我们的在 Notepad 中使用的选项。 Notepad 如何调整显示…

redis 如何保证数据同步(数据变化时)

redis 如何保证数据同步&#xff08;数据变化时&#xff09; 思路 1.新增、删除和修改都先对数据库进行操作&#xff0c;这时数据库的数据将域缓存中数据不同。 2.数据库进行变动后&#xff0c;返回结果&#xff0c;根据返回的结果判断数据库操作是否成功。 3.如果数据库操…

C++和Python计算金融数学方程算法模型

要点 C代码蒙特卡罗模拟金融产品估值&#xff0c;开发C并行计算模拟库。 算法伴随微分计算图及C代码实现释义&#xff1a;C应用经典的复合模式构建有向无环图&#xff0c;遍历有向无环图节点C实现&#xff0c;C使用懒惰评估计算次序&#xff0c;遍历代码实现&#xff0c;C代码…

图论复习(最短路、最小生成树)

图论复习 拓扑排序 原题链接&#xff1a;AcWing 848. 有向图的拓扑序列 - AcWing 在建图时&#xff0c;记录每个节点的入度&#xff0c;首先把入度为0的点都存到队列里。 然后在搜索时&#xff0c;每搜到一个点&#xff0c;就把这个点的入度 -1 &#xff0c;当它的入度变为…

Flutter开发进阶之瞧瞧BuildOwner

Flutter开发进阶之瞧瞧BuildOwner 上回说到关于Element Tree的构建还缺最后一块拼图&#xff0c;build的重要过程中会调用_element!.markNeedsBuild();&#xff0c;而markNeedsBuild会调用owner!.scheduleBuildFor(this);。 在Flutter框架中&#xff0c;BuildOwner负责管理构建…

计算机视觉之三维重建(2)---摄像机标定

文章目录 一、回顾线代1.1 线性方程组的解1.2 齐次线性方程组的解 二、透镜摄像机的标定2.1 标定过程2.2 提取摄像机参数2.3 参数总结 三、径向畸变的摄像机标定3.1 建模3.2 求解 四、变换4.1 2D平面上的欧式变换4.2 2D平面上的相似变换和仿射变换4.3 2D平面上的透射变换4.4 3D…

使用 VMWare 安装 Android-x86 系统(小白版)

文章目录 VMWare 介绍Android 系统介绍概述最终效果前置步骤开始安装 VMWare 介绍 VMware Workstation是VMware公司开发的一款桌面虚拟化软件。它允许用户在一台物理计算机上同时运行多个操作系统&#xff0c;每个操作系统都在自己的虚拟机中运行。这使得用户可以在同一台计算…

实例:NX二次开发使用链表进行拉伸功能(链表相关功能练习)

一、概述 在进行批量操作时经常会利用链表进行存放相应特征的TAG值&#xff0c;以便后续操作&#xff0c;最常见的就是拉伸功能。这里我们以拉伸功能为例子进行说明。 二、常用链表相关函数 UF_MODL_create_list 创建一个链表&#xff0c;并返回链表的头指针。…