前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（六）
思维导图
一、正则表达式
1.1正则表达式介绍
1.2 语法
<!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"><title>Document</title>
</head><body><script>const str = '我们在学习前端，希望学习前端能高薪毕业'// 正则表达式使用：// 1. 定义规则const reg = /前端/// 2. 是否匹配// console.log(reg.test(str)) // true// 3. exec()console.log(reg.exec(str)) // 返回数组</script>
</body></html>
1.3 元字符
1.3.1 边界符
1.3.2 量词
1.3.3 字符类
1.3.3.1 匹配字符集合
<!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"><title>Document</title><style>span {display: inline-block;width: 250px;height: 30px;vertical-align: middle;line-height: 30px;padding-left: 15px;}.error {color: red;background: url(./images/error1.png) no-repeat left center;}.right {color: green;background: url(./images/right.png) no-repeat left center;}</style>
</head><body><input type="text"><span></span><script>// 1. 准备正则const reg = /^[a-zA-Z0-9-_]{6,16}$/const input = document.querySelector('input')const span = input.nextElementSiblinginput.addEventListener('blur', function () {// console.log(reg.test(this.value))if (reg.test(this.value)) {span.innerHTML = '输入正确'span.className = 'right'} else {span.innerHTML = '请输入6~16位的英文数字下划线'span.className = 'error'}})</script>
</body></html>
1.3.3.2 预定义
1.4 修饰符
二、综合案例
JS代码：
<script>(function () {// 1. 发送短信验证码模块const code = document.querySelector('.code')let flag = true // 通过一个变量来控制 节流阀 // 1.1 点击事件code.addEventListener('click', function () {if (flag) {// 取反了，不能马上第二次点击flag = falselet i = 5// 点击完毕之后立马触发code.innerHTML = `0${i}秒后重新获取`// 开启定时器let timerId = setInterval(function () {i--code.innerHTML = `0${i}秒后重新获取`if (i === 0) {// 清除定时器clearInterval(timerId)// 从新获取code.innerHTML = `重新获取`// 到时间了，可以开启 flag了flag = true}}, 1000)}})})();// 2. 验证的是用户名// 2.1 获取用户名表单const username = document.querySelector('[name=username]')// 2.2 使用change事件 值发生变化的时候username.addEventListener('change', verifyName)// 2.3 封装verifyName函数function verifyName() {// console.log(11)const span = username.nextElementSibling// 2.4 定规则 用户名const reg = /^[a-zA-Z0-9-_]{6,10}$/if (!reg.test(username.value)) {// console.log(11)span.innerText = '输入不合法,请输入6~10位'return false}// 2.5 合法的 就清空spanspan.innerText = ''return true}// 3. 验证的是手机号// 2.1 获取手机表单const phone = document.querySelector('[name=phone]')// 2.2 使用change事件 值发生变化的时候phone.addEventListener('change', verifyPhone)// 2.3 verifyPhonefunction verifyPhone() {// console.log(11)const span = phone.nextElementSibling// 2.4 定规则 用户名const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/if (!reg.test(phone.value)) {// console.log(11)span.innerText = '输入不合法,请输入正确的11位手机号码'return false}// 2.5 合法的 就清空spanspan.innerText = ''return true}// 4. 验证的是验证码// 4.1 获取验证码表单const codeInput = document.querySelector('[name=code]')//4.2 使用change事件 值发生变化的时候codeInput.addEventListener('change', verifyCode)// 4.3 verifyPhonefunction verifyCode() {// console.log(11)const span = codeInput.nextElementSibling// 4.4 定规则 验证码const reg = /^\d{6}$/if (!reg.test(codeInput.value)) {// console.log(11)span.innerText = '输入不合法,6 位数字'return false}// 4.5 合法的 就清空spanspan.innerText = ''return true}// 5. 验证的是密码框// 5.1 获取密码表单const password = document.querySelector('[name=password]')//5.2 使用change事件 值发生变化的时候password.addEventListener('change', verifyPwd)// 5.3 verifyPhonefunction verifyPwd() {// console.log(11)const span = password.nextElementSibling// 5.4 定规则 密码const reg = /^[a-zA-Z0-9-_]{6,20}$/if (!reg.test(password.value)) {// console.log(11)span.innerText = '输入不合法,6~20位数字字母符号组成'return false}// 5.5 合法的 就清空spanspan.innerText = ''return true}// 6. 密码的再次验证// 6.1 获取再次验证表单const confirm = document.querySelector('[name=confirm]')//6.2 使用change事件 值发生变化的时候confirm.addEventListener('change', verifyConfirm)// 6.3 verifyPhonefunction verifyConfirm() {// console.log(11)const span = confirm.nextElementSibling// 6.4 当前表单的值不等于 密码框的值就是错误的if (confirm.value !== password.value) {// console.log(11)span.innerText = '两次密码输入不一致'return false}// 6.5 合法的 就清空spanspan.innerText = ''return true}// 7. 我同意const queren = document.querySelector('.icon-queren')queren.addEventListener('click', function () {// 切换类 原来有的就删掉，原来没有就添加this.classList.toggle('icon-queren2')})// 8. 提交模块const form = document.querySelector('form')form.addEventListener('submit', function (e) {// 判断是否勾选我同意模块 ，如果有 icon-queren2说明就勾选了，否则没勾选if (!queren.classList.contains('icon-queren2')) {alert('请勾选同意协议')// 阻止提交e.preventDefault()}// 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止// console.log(verifyName())if (!verifyName()) e.preventDefault()if (!verifyPhone()) e.preventDefault()if (!verifyCode()) e.preventDefault()if (!verifyPwd()) e.preventDefault()if (!verifyConfirm()) e.preventDefault()})</script>三、阶段案例
登录页
JS代码
<script>// 1. tab栏切换 事件委托const tab_nav = document.querySelector('.tab-nav')const pane = document.querySelectorAll('.tab-pane')// 1.1 事件监听tab_nav.addEventListener('click', function (e) {if (e.target.tagName === 'A') {// 取消上一个activetab_nav.querySelector('.active').classList.remove('active')// 当前元素添加activee.target.classList.add('active')// 先干掉所有人 for循环for (let i = 0; i < pane.length; i++) {pane[i].style.display = 'none'}// 让对应序号的 大pane 显示 pane[e.target.dataset.id].style.display = 'block'}})// 点击提交模块const form = document.querySelector('form')const agree = document.querySelector('[name=agree]')const username = document.querySelector('[name=username]')form.addEventListener('submit', function (e) {e.preventDefault()// 判断是否勾选同意协议if (!agree.checked) {return alert('请勾选同意协议')}// 记录用户名到本地存储localStorage.setItem('xtx-uname', username.value)// 跳转到首页location.href = './index.html'})</script>首页
<script>// 检测 userAgent（浏览器信息）!(function () {const userAgent = navigator.userAgent// 验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})()</script>
相关文章：
前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs（六）
思维导图 一、正则表达式 1.1正则表达式介绍 1.2 语法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…...
云硬盘和物理硬盘的区别
服务器的硬盘是服务器用来存储数据，一般有云硬盘和物理硬盘两种。云硬盘是云计算平台的虚拟技术的存储服务，将数据存储于云端通过分布式存储架构的形式。物理硬盘是将数据存储在服务器或者是PC端上，存储空间比较大，读写速度也很快…...
数据分析--观察数据处理异常值
引包： import pandas as pd import numpy as np 读取文件： dfpd.read_csv(./HR.csv) 文件见绑定资源（来自kaggle的HR.csv） 处理过程： 一、从df中拿出处理对象 二、找出缺失值的位置并删除 s1_sdf[satisfactio…...
vue3+elementPlus el-input的type=“number“时去除右边的上下箭头
改成 代码如下 <script lang"ts" setup> import {ref} from vue const inputBtn ref() </script> <template><el-input type"number" v-model"inputBtn" style"width: 80px;" class"no_number">…...
华为云云耀云服务器L实例评测｜Elasticsearch的可视化Kibana工具安装 IK分词器的安装和使用
前言 最近华为云云耀云服务器L实例上新，也搞了一台来玩，期间遇到各种问题，在解决问题的过程中学到不少和运维相关的知识。 本篇博客介绍Elasticsearch的可视化Kibana工具安装，以及IK分词器的安装和使用。 其他相关的Elasticsea…...
加密货币交易技巧——人和（一）
交易原则 本篇主要讲述加密货币交易人需要注意的几个原则。 1.不能贪心，具体表现在做好仓位管理。第一，不要重仓进去，一定要轻仓。第二，开仓就想好本次要赚多少钱，不要太贪，到了预期点就止盈。第三&am…...
数学建模：最优化问题及其求解概述
数学建模：最优化问题及其求解概述 最优化问题定义分类离散优化问题连续优化问题 求解 此博客围绕运筹学以及最优化理论的相关知识，通俗易懂地介绍了最优化问题的定义、分类以及求解算法。 最优化问题 定义 数学优化（Mathematical Optimiza…...
企业办理CS资质，怎么选择办理等级？
信息系统建设和服务能力等级证书（Information system construction and service—Capability assessment system，简称：CS），由中国电子信息行业联合会组织开展的第三方评估活动，是根据《信息系统建设和服务能…...
华为云云耀云服务器L实例评测｜Huawei Cloud EulerOS 自动化环境部署
[toc] Huawei Cloud EulerOS 自动化环境部署 云耀云服务器L实例【Huawei Cloud EulerOS 2.0 64bit】 Python Git Google Chrome Chromedriver Selenium More… 1. Python 镜像创建后自带。 2.Git 拉取项目。 sudo yum install git3. Google Chrome 使用root权限或sudo权…...
从一张表格开始做挖机报价系统
一、前言 历时4个月的挖机销售报价系统进入收尾阶段，由我直接负责与业务方对接，这中间各种折腾真是一言难尽，项目开发过程中还要维护POS系统以及牛奶配送系统，本项目我们采用的是迭代开发，今天讲一下具体的开发过程以…...
Qt扫盲-QTreeView 理论总结
QTreeView 理论使用总结 一、概述二、快捷键绑定三、提高性能四、简单实例1. 设计与概念2. TreeItem类定义3. TreeItem类的实现4. TreeModel类定义5. TreeModel类实现6. 在模型中设置数据 一、概述 QTreeView实现了 model 中item的树形表示。这个类用于提供标准的层次列表&…...
BF算法详解（JAVA语言实现）
目录 BF算法的介绍 图解 JAVA语言实现 BF算法的时间复杂度 BF算法的介绍 BF算法，即暴力(Brute Force)算法，是普通的模式匹配算法，BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配，若相等，则继…...
零基础转行网络工程师，过来人给的一些建议
最近收到好多同学的一些提问，零基础没经验，能不能转行到网络工程师？薪资能有多少？发展前景怎么样？ 应该有不少朋友都有这个疑问，那么，今天我尽量给大家做出一个详细的解答，希望能有…...
Vue中如何进行分布式搜索与全文搜索（如Elasticsearch）
在Vue中实现分布式搜索与全文搜索（使用Elasticsearch） 分布式搜索和全文搜索在现代应用程序中变得越来越重要，因为它们可以帮助用户快速查找和检索大量数据。Elasticsearch是一种强大的分布式搜索引擎，它可以用于实现高性能的全文…...
数据结构-图-最小生成树问题
最小生成树 并查集定义举例说明查找某个元素属于哪个集合代码实现路径压缩 Kruskal算法原理代码实现 Prim算法原理代码实现 并查集 定义 🚀在一些应用问题中，需要将n个不同的元素分成一些不相交的集合。开始时，每个元素自成一个单元素集合&…...
使用vite+npm封装组件库并发布到npm仓库
组件库背景：使用elementplusvue封装了一个通过表单组件。通过JSX对el-form下的el-input和el-button等表单进行统一封装，最后达到，通过数据即可一键生成页面表单的功能。 1.使用vite创建vue项目 npm create vitelatest elementplus-auto-form…...
85.最大矩形
单调栈，时间复杂度o(mn)，空间复杂度o(mn) class Solution { public:int maximalRectangle(vector<vector<char>>& matrix) {int mmatrix.size();if(m0){return 0;}int nmatrix[0].size();//记录矩阵中每个元素左边连续1的数量vector<…...
Windows服务器 开机自启动服务
1、新建txt，并粘贴下面脚本 start cmd /k "cd /d D:\ahjd&&java -jar clips-admin.jar" start cmd /k "cd /d D:\ahjd\dist&&simple-http-server.exe -i -p 8000"说明，脚本格式为：start cmd /k “cd /d…...
《算法通关之路》chapter17一些通用解题模板
《算法通关之路》学习笔记，记录一下自己的刷题过程，详细的内容请大家购买作者的书籍查阅。 1 二分法 1.1 普通二分法 # 查找nums数组中元素值为target的下标。如果不存在，则返回-1def bs(nums: list[int], target: int) -> int :l, h …...
常用求解器安装
1 建模语言pyomo Pyomo是一个Python建模语言，用于数学优化建模。它可以与不同的求解器（如Gurobi，CPLEX，GLPK，SCIP等）集成使用，以求解各种数学优化问题。可以使用Pyomo建立数学优化模型…...
第三章：最新版零基础学习 PYTHON 教程（第一节 - Python 运算符）
在Python编程中，运算符一般用于对值和变量进行操作。这些是用于逻辑和算术运算的标准符号。在本文中，我们将研究不同类型的Python 运算符。 运算符：这些是特殊符号。例如- + 、 * 、 / 等。操作数：它是应用运算符的值。目录 Python 中的运算符类型 Python 中的算术运算符…...
细粒度特征提取和定位用于目标检测：PPCNN
1、简介 近年来，深度卷积神经网络在计算机视觉上取得了优异的性能。深度卷积神经网络以精确地分类目标信息而闻名，并采用了简单的卷积体系结构来降低图层的复杂性。基于深度卷积神经网络概念设计的VGG网络。VGGNet在对大规模图像进行分类方面取得了巨大…...
【STM32单片机】数学自动出题器设计
文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103C8T6单片机控制器，使用按键、IIC OLED模块等。 主要功能： 系统运行后，OLED液晶显示出题器开机界面，默认结果范围为100，可按…...
C语言之动态内存管理篇（1）
目录 为什么存在动态内存分配 动态内存函数的介绍 malloc free calloc realloc 常见的动态内存错误 今天收假了，抓紧时间写几篇博客。我又来赶进度了。今天我们来讲解动态内存管理。🆗🆗 为什么存在动态内存分配 假设我们去实现一个…...
React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint
前言 我的项目版本如下： React： V18.2.0Node.js: V16.14.0TypeScript：最新版工具： VsCode 本文将采用图文详解的方式，手把手带你快速完成在React项目中配置husky、prettier、commitLint，实现编码规范的统…...
【VINS】苹果手机采集单目相机+IMU数据离线运行VINS-Mono
0.准备工作 开个新坑，之前用Android手机做过离线采集数据的实验，这次用IPhone来测试！ 1.虚拟机配置Mac OS 下载一个Mac OS 的ios镜像，打开虚拟机按照跟Ubuntu差不多的方式安装，但是发现没有Mac OS的入口。 因为VMwa…...
数据结构 2.1 单链表
1.单链表 线性表：1.有限的序列 2.序列中的每一个元素都有唯一的前驱和后继，除了开头和结尾的两个节点。 顺序表：分配一块连续的内存去存放这些元素，eg、数组 链表：内存是不连续的，元素会各自被分配一块内…...
[Machine Learning]pytorch手搓一个神经网络模型
因为之前虽然写过一点点关于pytorch的东西，但是用的还是他太少了。 这次从头开始，尝试着搓出一个神经网络模型 （因为没有什么训练数据，所以最后的训练部分使用可能不太好跑起来的代码作为演示，如果有需要自己连上数据…...
KdMapper扩展实现之Dell(pcdsrvc_x64.pkms)
1.背景 KdMapper是一个利用intel的驱动漏洞可以无痕的加载未经签名的驱动，本文是利用其它漏洞（参考《【转载】利用签名驱动漏洞加载未签名驱动》）做相应的修改以实现类似功能。需要大家对KdMapper的代码有一定了解。 2.驱动信息 驱动名称pcds…...
python和go相互调用的两种方法
前言 Python 和 Go 语言是两种不同的编程语言，它们分别有自己的优势和适用场景。在一些项目中，由于团队内已有的技术栈或者某一部分业务的需求，可能需要 Python 和 Go 相互调用,以此来提升效率和性能。 性能优势 Go 通常比 Python 更高效&…...
网站开发工作总结论文/seo发帖论坛
1.class not found ,不能加载某个配置文件. 具体错误原因找不到了,在我们的工程中,主要是因为lib中的包有冲突,这个只能作为个人日志了,好像和大家分享不了.不好意思哈~ 2.action中处理两个或者两个以上bo时,应注意,尽量由一个bo方法来实现,即在一个bo中注入两个dao,而不要在…...
赣州建设企业网站/外链发布平台
点击上方蓝色字体，选择“标星公众号”优质文章，第一时间送达关注公众号后台回复pay或mall获取实战项目资料视频作者：dalaoyang来源：juejin.im/post/5be1a485f265da612859974c持续交付的概念，相信你们都听过，…...
126企业邮箱注册申请/seo优化一般优化哪些方面
霍夫圆变换的基本原理和霍夫线变换类似，只是点对应的二维极径极角空间被三维的圆心点x, y还有半径r空间取代。 对直线来说，一条直线能由参数极径极角（r, θ）表示。而对圆来说，我们需要三个参数来表示一个圆，…...
企业画册设计图片/企业网站优化技巧
Redis服务器是典型的一对多服务器程序：一个服务器可以和多个客户端建立网络连接，Redis使用单线程单进程的方式来处理命令请求（通过IO多路转接实现），并和多个服务端进行网络通信。 每个和服务端进行连接的客户端&#x…...
wordpress 淘宝客页面/seo网站优化快速排名软件
1、录制脚本：(1)选中Test Plan单击鼠标右键，在弹出菜单中选择Add->Thread Group；(2)接下来选中WorkBench单击鼠标右键，在弹出菜单中选择Add->Non-Test Elements->HTTP Proxy Server；(3)在“HTTP Proxy Server…...
想象力网站建设公司/百度ocpc怎么优化
检查点： 检查自己的页面是http还是https的，然后核对用的是mqtt/mqtts，或者是ws/wss检查自己的地址是否对（尤其是BasePath），我一开始地址应该是ws://xxxxx/mqtt（BasePath是mqtt）&…...