前端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建立数学优化模型…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...
安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲
文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...