当前位置： 首页 > news >正文

day41-Verify Account Ui（短信验证码小格子输入效果）

news 2026/2/9 21:15:00

50 天学习 50 个项目 - HTMLCSS and JavaScript

day41-Verify Account Ui（短信验证码小格子输入效果）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Verify Account</title><link rel="stylesheet" href="style.css" />
</head><body><div class="container"><h2>验证您的帐户</h2><p>我们给你发了六位数的验证码到cool_guy@email.com<br /> 输入下面的验证码来确认您的电子邮件地址。</p><!-- 验证码容器 --><div class="code-container"><input type="number" class="code" placeholder="0" min="0" max="9" required value=""><input type="number" class="code" placeholder="0" min="0" max="9" required value=""><input type="number" class="code" placeholder="0" min="0" max="9" required value=""><input type="number" class="code" placeholder="0" min="0" max="9" required value=""><input type="number" class="code" placeholder="0" min="0" max="9" required value=""><input type="number" class="code" placeholder="0" min="0" max="9" required value=""></div><small class="info">这只是设计。我们没有给你发邮件，因为我们没有你的邮箱，对吧?</small></div><script src="script.js"></script>
</body></html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');* {box-sizing: border-box;
}body {background-color: #fbfcfe;font-family: 'Muli', sans-serif;/* 子元素居中 */display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}/* 大盒子容器 */
.container {background-color: #fff;border: 3px #000 solid;border-radius: 10px;padding: 30px;max-width: 1000px;text-align: center;
}/* 验证码容器 */
.code-container {/* 居中向两边排列 */display: flex;align-items: center;justify-content: center;margin: 40px 0;
}/* input type="number" */
.code {border-radius: 5px;font-size: 75px;height: 120px;width: 100px;border: 1px solid #eee;/* 其所在容器宽度的 1%  6px*/margin: 1%;text-align: center;font-weight: 300;/* 该表单元素显示成类似于普通文本输入框的样式 *//* appearance: textfield; */
}/* 隐藏输入框中的旋转箭头 */
/* 适用于 Chrome 和 Safari */
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {appearance: none;margin: 0;
}/* 设置表单元素（类名为".code" ）在合法状态（valid）时的样式 */
.code:valid {border-color: #3498db;box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}/* 提示信息 */
.info {background-color: #eaeaea;display: inline-block;padding: 10px;line-height: 20px;max-width: 400px;color: #777;border-radius: 5px;
}/* <=600px时，的效果 */
@media (max-width: 600px) {.code-container {flex-wrap: wrap;}.code {font-size: 60px;height: 80px;max-width: 70px;}
}

script.js


// 重点 flex .code:valid
// 1.获取元素节点
const codes = document.querySelectorAll('.code'); // 所有的验证码数字
const collectedCodes = []; // 用于收集code的值的数组// 自动聚焦于验证码第一个数字
codes[0].focus();// 遍历 绑定键盘按下事件，判断输入的长度和值是否合法
codes.forEach((code, idx) => {code.addEventListener('keydown', (e) => {console.log(e.key);// 输入为0-9内的数字if (e.key >= 0 && e.key <= 9) {codes[idx].value = ''; // 更新输入框的值为空 目的是消除一个code填入多的数字// 光标聚焦于后一个数字 使用trycatch消除浏览器控制台报错setTimeout(() => {try {codes[idx + 1].focus()} catch (error) {console.log('已经位于最后一个数字');}}, 10);collectedCodes[idx] = e.key; // 收集code的值} else if (e.key === 'Backspace') { // 按下为删除键// 光标聚焦于前一个数字setTimeout(() => {try {codes[idx - 1].focus()} catch (error) {console.log('已经位于第一个数字');}}, 10);collectedCodes[idx] = ''; // 删除的时候移除对应位置的code的值}// 在任何需要的时候可以使用 collectedCodes 数组获取收集到的 code 的值console.log(collectedCodes);});
});

相关文章：

day41-Verify Account Ui（短信验证码小格子输入效果）

50 天学习 50 个项目 - HTMLCSS and JavaScript day41-Verify Account Ui&#xff08;短信验证码小格子输入效果&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name&qu…...

编程日记 2023/7/27 13:55:56

C. Maximum Set

Problem - 1796C - Codeforces 思路&#xff1a;这个题在做的时候基本的思路是对的&#xff0c;但是没有想到O(1)求答案&#xff0c;枚举的然后T了&#xff0c;我们能够知道&#xff0c;假设前面的数小&#xff0c;那么每个数一定是前面的倍数&#xff0c;所以至少乘以2&#x…...

编程日记 2023/7/27 13:54:55

基于springboot+vue学生宿舍报修公寓管理系统

我校日常管理活动中也大部分使用信息化&#xff0c;但学生宿舍的报修管理仍停留在手工办公阶段&#xff0c;使用纸张来记录。不仅对于维修人员和后勤管理人员来说无法提高工作效率&#xff0c;也不方便学生报修。本学生宿舍报修系统主要针对三类人员。第一类是学生用户模块&…...

编程日记 2023/7/27 13:53:54

缓存和数据库一致性问题分析

目录 1、数据不一致的原因 1.1 并发操作 1.2 非原子操作 1.3 数据库主从同步延迟 2、数据不一致的解决方案 2.1 并发操作 2.2 非原子操作 2.3 主从同步延迟 2.4 最终方案 3、不同场景下的特殊考虑 3.1 读多写少的场景 3.2 读少写多的场景 1、数据不一致的原因 导致…...

编程日记 2023/7/27 13:52:53

用Rust生成Ant-Design Table Columns | 京东云技术团队

经常开发表格&#xff0c;是不是已经被手写Ant-Design Table的Columns整烦了&#xff1f; 尤其是ToB项目&#xff0c;表格经常动不动就几十列。每次照着后端给的接口文档一个个配置&#xff0c;太头疼了&#xff0c;主要是有时还会粘错就尴尬了。 那有没有办法能自动生成colu…...

编程日记 2023/7/27 13:51:52

java.lang.ClassNotFoundException: sun.misc.BASE64Decoder

有一个新的应用服务&#xff0c;idea启动应用应用服务时&#xff0c;突然报错java.lang.ClassNotFoundException: sun.misc.BASE64Decoder &#xff0c;然后在网上搜索&#xff0c;说是建议使用apache包&#xff0c;该类新的JRE已经废弃&#xff0c;并从rt.jar包中移除。但是该…...

编程日记 2023/7/27 13:50:51

Unity进阶--对象池数据场景管理器笔记

文章目录 泛型单例类泛型单例类&#xff08;不带组件版&#xff09;对象池管理器数据管理器场景管理器 泛型单例类 using System.Collections; using System.Collections.Generic;public abstract class ManagersSingle<T> where T : new() {private static T instance;…...

编程日记 2023/7/27 13:49:50

【Seata】微服务集成seata

文章目录 1、Seata介绍2、Seata架构3、部署TC服务4、微服务集成seata 1、Seata介绍 Seata是 2019 年 1 月份蚂蚁金服和阿里巴巴共同开源的分布式事务解决方案。 官网http://seata.io/ 2、Seata架构 Seata事务管理有三个角色&#xff1a; TC (Transaction Coordinator) - 事务…...

编程日记 2023/7/27 13:48:49

解决react,＜img＞src使用require方法引入图片不显示问题

{settingList.map(i > (<img src{require(./images/${i.deviceTypeName}.png).default} />))} 解决方法&#xff1a; 再导入的图片后加.default即可 <img src{require(../../images/bg.png).default} alt"" /> 推荐阅读&#xff1a;https://www.cnb…...

编程日记 2023/7/27 13:47:48

从小白到大神之路之学习运维第67天-------Tomcat应用服务 WEB服务

第三阶段基础 时 间&#xff1a;2023年7月25日 参加人&#xff1a;全班人员 内 容&#xff1a; Tomcat应用服务 WEB服务 目录 一、中间件产品介绍 二、Tomcat软件简介 三、Tomcat应用场景 四、安装配置Tomcat 五、配置目录及文件说明 &#xff08;一&#xff09;to…...

编程日记 2023/7/27 13:46:46

图解SQL基础知识，小白也能看懂的SQL文章

本文介绍关系数据库的设计思想&#xff1a; 在 SQL 中&#xff0c;一切皆关系。 在计算机龄域有许多伟大的设计理念和思想&#xff0c;例如&#xff1a; 在 Unix 中&#xff0c;一切皆文件。 在面向对象的编程语言中&#xff0c;一切皆对象。 关系数据库同样也有自己的设计…...

编程日记 2023/7/27 13:45:45

自动驾驶感知系统-毫米波雷达

毫米波雷达就是电磁波&#xff0c;雷达通过发射无线电信号并接收反射信号来测定车辆与物体间的距离&#xff0c;其频率通常介于10~300GHz之间。与厘米波导引头相比&#xff0c;毫米波导引头体积小&#xff0c;质量轻&#xff0c;空间分辨率高&#xff1b;与红外、激光、电视等光…...

编程日记 2023/7/27 13:44:44

Esp32_Arduino接入腾讯云笔记

ESP32是一款由乐鑫科技&#xff08;Espressif Systems&#xff09;推出的双核、低功耗、集成Wi-Fi和蓝牙的单芯片微控制器。它采用了Tensilica Xtensa LX6高性能处理器&#xff0c;具有大量的GPIO引脚、模数转换器、SPI、I2S、UART、PWM、I2C和SD卡接口等功能&#xff0c;可以满…...

编程日记 2023/7/27 13:43:43

python简单入门

python简单入门 文章目录 python简单入门0. 地址链接1. 官网2.2. 下载地址3. 官方文档 1. 第一章1.1 python解释器1.2 基础语法1.2.1 常见数据类型1.2.2 强制类型转换1.2.3 注释1.2.4 运算符1.2.5 字符串1.2.5.1 字符串的定义1.2.5.2 字符串拼接1.2.5.3 格式化字符串1.2.5.3 精…...

编程日记 2023/7/27 13:42:40

如何快速从csv文件搭建一个简单的神经网络模型（回归）

快速搭建一个简单的神经网络预测模型 采用的数据是kaggle的房价预测数据 涉及的数据文件&#xff0c;提取码为&#xff1a;zxcv #导入相关包 import pandas as pd import numpy as np import torch import torch.nn as nn首先读取数据 trainpd.read_csv("path",enc…...

编程日记 2023/7/27 13:41:38

Pytorch深度学习-----DataLoader的用法

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…...

编程日记 2023/7/27 13:40:37

macOS Ventura 13.5 (22G74) Boot ISO 原版可引导镜像下载

macOS Ventura 13.5 (22G74) Boot ISO 原版可引导镜像下载 本站下载的 macOS 软件包&#xff0c;既可以拖拽到 Applications&#xff08;应用程序&#xff09;下直接安装&#xff0c;也可以制作启动 U 盘安装&#xff0c;或者在虚拟机中启动安装。另外也支持在 Windows 和 Lin…...

编程日记 2023/7/27 13:39:36

【机器学习】 奇异值分解 （SVD） 和主成分分析 （PCA）

一、说明 在机器学习 &#xff08;ML&#xff09; 中&#xff0c;一些最重要的线性代数概念是奇异值分解 &#xff08;SVD&#xff09; 和主成分分析 &#xff08;PCA&#xff09;。收集到所有原始数据后&#xff0c;我们如何发现结构&#xff1f;例如&#xff0c;通过过去 6 天…...

编程日记 2023/7/27 13:38:33

如何用logging记录python实验结果？

做python实验有时候需要打印很多信息在控制台(console&#xff09;&#xff0c;但是控制台的信息不方便回顾和保存&#xff0c;故而可以采用logging将信息存储起来。 先新建一个文件message.log代码如下&#xff1a; import logging logging.basicConfig(filename"messa…...

编程日记 2023/7/27 13:37:32

C语言假期作业 DAY 03

目录 题目 一、选择题 1、已知函数的原型是&#xff1a; int fun(char b[10], int *a); &#xff0c;设定义&#xff1a; char c[10];int d; &#xff0c;正确的调用语句是&#xff08; &#xff09; 2、请问下列表达式哪些会被编译器禁止【多选】&#xff08; &#xff09; 3、…...

编程日记 2023/7/27 13:36:31

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2026/1/30 9:51:12

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2026/2/5 4:38:22