2023.11.14使用bootstrap制作一个简洁的前端注册登录页
2023.11.14使用bootstrap制作一个简洁的前端注册登录页
比较简洁的登录页，主要是为自己开发的一些平台页面做测试用，前端具备功能如下：
（1）输入用户名、密码，需补充后端验证代码。
（2）预留注册链接。
（3）预留忘记密码链接。
（4）可自动生成验证码，需补充后端验证代码。
（5）响应式网页。
（6）使用bootstrap进行美化。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body><div class="container"><div class="row justify-content-center mt-5"><div class="col-md-6 col-lg-4"><h3 class="text-center mb-4">Login</h3><!-- 登录表单 --><form><div class="form-group"><label for="username">Username</label><input type="text" class="form-control" id="username" placeholder="Enter username"></div><div class="form-group"><label for="password">Password</label><input type="password" class="form-control" id="password" placeholder="Enter password"></div><div class="form-group"><label for="verification-code">Verification Code</label><div class="input-group"><input type="text" class="form-control" id="verification-code" placeholder="Enter verification code"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="generate-code-btn">Generate Code</button></div></div></div><br><button type="submit" class="btn btn-primary btn-block">Login</button></form><hr><!-- 忘记密码链接 --><p class="text-center"><a href="#">Forgot password?</a></p><!-- 注册链接 --><p class="text-center">Don't have an account? <a href="#">Register</a></p></div></div>
</div><script>// 生成验证码function generateCode() {var code = Math.floor(Math.random() * 9000) + 1000;return code;}// 点击按钮生成验证码document.getElementById('generate-code-btn').addEventListener('click', function() {var verificationCodeInput = document.getElementById('verification-code');verificationCodeInput.value = generateCode();});
</script></body>
</html>
相关文章：
2023.11.14使用bootstrap制作一个简洁的前端注册登录页
2023.11.14使用bootstrap制作一个简洁的前端注册登录页 比较简洁的登录页，主要是为自己开发的一些平台页面做测试用，前端具备功能如下： （1）输入用户名、密码，需补充后端验证代码。 （2ÿ…...
Avatar虚拟形象解决方案，趣味化的视频拍摄与直播新体验
企业们正在寻找新的方式来吸引和保持观众的注意力,一种新兴的解决方案就是使用Avatar虚拟形象技术，这种技术可以让用户在视频拍摄或直播场景中，以自定义的数字人形象出现，同时保持所有的表情和脸部驱动。美摄科技正是这个领域的领军者&#x…...
MongoDB备份与恢复以及导入导出
MongoDB备份与恢复 1、mongodump数据备份 在Mongodb中我们使用mongodump命令来备份MongoDB数据。该命令可以导出所有数据 (数据和数据结构) 或指定数据（集合、部分集合内容）到指定目录中。 语法： mongodump -h dbhost -d dbname -o dbdirec…...
如何挑选猫主食罐头？宠物店自用的5款猫主食罐头推荐！
临近双十二大促，是时候给家里的猫主子屯猫主食罐头了。许多铲屎官看大促的各种品牌宣传，看到眼花缭乱，不知道选哪些猫主食罐头好，胡乱选又怕踩坑。 猫罐头侠闪亮登场！如何挑选猫主食罐头？作为经营宠物店7年…...
立哥先进研发-API安全方案
项目背景：随着技术进步，很多优秀技术也被用在黑灰产之中，例如爬虫系统在票务系统中的滥用，尤其机票系统。机票爬虫们威力之大，让人叹为观止：多数订票网站，真实用户产生的不到10%，其浏…...
小函数：Lambda表达式（Java篇）
Lambda表达式的使用场景：用以简化接口实现。 关于接口实现，可以有很多种方式来实现。例如：设计接口的实现类、使用匿名内部类。 但是lambda表达式，比这两种方式都简单！ lambda表达式毕竟只是⼀个匿名方法。当实现的接…...
RSS订阅快速连接Notion
数环通让您可以通过不到几分钟的时间即可实现RSS订阅与Notion的对接与集成，从而高效实现工作流程自动化，降本增效！ 1.产品介绍 RSS订阅是数环通的内置应用，很多用户通过RSS订阅来收集自己在各大平台上看的内容，当RSS…...
VMware ubuntu 新虚拟机的创建
根据自己指定的路径安装好vm后。 创建新的虚拟机。 记录一下，下次用到别再忘记了。 如需转载，注明出处！ 点赞收藏关注我 以资鼓励 打开vm 软件，点击创建新的虚拟机 选择典型，点击下一步 选择你的ubuntu镜像iso文件 …...
第一篇 《随机点名答题系统》简介及设计流程图（类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统）
专栏目录 第一篇 《随机点名答题系统》简介及设计流程图（类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统）-CSDN博客 第二篇 《随机点名答题系统》——题库管理详解（类抽奖系统、在线答题…...
C# .NET6 Log4net输出日志
C# Log4Net用法-CSDN博客: .NET6.0的日志组件Log4net_.net log4net-CSDN博客 在 C# .NET6 开发中，log4net 是一个常用的日志记录框架，它可以帮助我们方便地输出日志信息。本教程将向你展示如何在 C# .NET6 中实现 log4net 的日志输出功能。 整体流程 下…...
python数据结构与算法-03_链表
链式结构 上一节讲到了支持随机访问的线性结构，这次我们开始讲链式结构, 视频里我会说下这两种结构的区别，然后讲解最常见的单链表和双链表。 之前在专栏文章那些年，我们一起跪过的算法题[视频]里实现过一个 lru_cache， 使用到的…...
Springboot-aop的使用
aop:面向切面编程，可以看作是面向对象的补充 举例 1.依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.1</version><relativePath/>…...
数列计算
题目描述 有一列数是 : 请找出这个数列的规律，编写程序计算并输出这个数列的第项，要求是分数形式，并计算这个数列的前项和 ( 结果四舍五入保留两位小数 ) 输入格式 第一行仅有一个正整数 （) 。 输出格式 共有 行，第一…...
阿里云全球故障凸显“云集中”风险
阿里云12日发生的全球性故障再次将“云集中风险”推上风口浪尖。这一公有云史上罕见的事件不仅影响了数以万计的企业和服务，也引发了对云服务集中化趋势的深刻反思。 2023年11月12日17:44(GMT8)开始，阿里云基础设施发生严重故障，导致阿里巴巴…...
【2015年数据结构真题】
用单链表保存m个整数，结点的结构为 [data] [link]，且|data|<n(n为正整数)。现要求设计一个时问复杂度尽可能高效的算法，对于链表中 data 的绝对值相等的结点，仅保留第一次出现的结点而删除其余绝对值相等的结点。例如ÿ…...
vxe表格行拖拽
安装第三方插件 import Sortable from sortablejs 可以跟后端商议表格添加seq 顺序， 按照循序排序 secondInput 调用 修改接口api 然后重新获取数据 //在get 请求之后 使用nextTick 使用 const rowDrop () > {nextTick(() > {let xTable2 planDat…...
Linux之基本指令操作
1、whoami whoami：查看当前账号是谁 2、who who：查看当前我的系统当中有哪些用户，当前有哪些人登录了我的机器 3、 pwd pwd：查看我当前所处的目录，就好比Windows下的路径 4、ls ls：查看当前目录下的文件信…...
海康设备、LiveNVR等通过GB35114国密协议对接到LiveGBS GB28181/GB35114平台的详细操作说明
一、LiveNVR通过GB35114接入LiveGBS 1.1 开启LiveGBS 35114功能 信令服务livecms.ini配置文件中[sip]增加一行gm1 启动LiveCMS 1.2 生成设备端证书 我们用LiveNVR做为设备端向LiveGBS注册，这里先生成LiveNVR的设备证书，并将LiveNVR的设备证书给LiveGB…...
BUUCTF 面具下的flag 1
BUUCTF:https://buuoj.cn/challenges 题目描述： 下载附件，得到一张.jpg图片。 密文： 解题思路： 1、将图片放到Kali中，使用binwalk检测出隐藏zip包。 使用foremost提取zip压缩包到output目录下 解压zip压缩包&…...
ArcGIS实现矢量区域内所有要素的统计计算
1、任务需求：统计全球各国所有一级行政区相关属性的总和。 （1）有一个全球一级行政区的矢量图，包含以下属性（洪灾相关属性 province.shp） （2）需要按照国家来统计各个国家各属性的总值…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
MMaDA: Multimodal Large Diffusion Language Models
CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
AI病理诊断七剑下天山，医疗未来触手可及
一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...
MySQL 主从同步异常处理
阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示ÿ…...