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

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

news 2026/4/4 22:26:05

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（短信验证码小格子输入效果） 效果 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 思路：这个题在做的时候基本的思路是对的，但是没有想到O(1)求答案，枚举的然后T了，我们能够知道，假设前面的数小，那么每个数一定是前面的倍数，所以至少乘以2&#x…...

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

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

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

编程日记 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 | 京东云技术团队

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

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

java.lang.ClassNotFoundException: sun.misc.BASE64Decoder

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

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

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

文章目录泛型单例类泛型单例类（不带组件版）对象池管理器数据管理器场景管理器泛型单例类 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事务管理有三个角色： TC (Transaction Coordinator) - 事务…...

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

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

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

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

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

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

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

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

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

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

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

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

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

Esp32_Arduino接入腾讯云笔记

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

编程日记 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的房价预测数据涉及的数据文件，提取码为：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的使用（ToTensor，Normalize，Resize ，Co…...

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

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

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

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

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

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

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

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

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

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

C语言假期作业 DAY 03

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

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

Ubuntu 24.04裸机部署Home Assistant避坑指南：从Python源码编译到HACS插件全流程

Ubuntu 24.04裸机部署Home Assistant全栈实战：从Python环境构建到智能生态整合当智能家居逐渐成为现代生活的标配，如何打造一个高度定制化的控制中心成为技术爱好者的新追求。Home Assistant作为开源家庭自动化平台，以其强大的兼容性和灵活性…...

编程新知 2026/4/4 22:16:10

SIwave阻抗仿真进阶：如何利用Workflow Wizard和高级设置，精准优化你的DDR/高速线阻抗

SIwave阻抗仿真进阶：Workflow Wizard与高级设置实战指南在高速PCB设计中，阻抗控制从来都不是简单的"达标"或"不达标"二分法。当你的设计进入DDR4/5或SerDes领域，那些看似微小的阻抗波动可能成为信号完整性的隐形杀手。…...

编程新知 2026/4/4 22:11:54

memtest_vulkan显存稳定性测试工具：面向开发者与硬件工程师的底层诊断方案

memtest_vulkan显存稳定性测试工具：面向开发者与硬件工程师的底层诊断方案【免费下载链接】memtest_vulkan Vulkan compute tool for testing video memory stability 项目地址: https://gitcode.com/gh_mirrors/me/memtest_vulkan 问题溯源：揭开…...

编程新知 2026/4/4 22:09:54

超越序列：让AI以“面向对象”的方式理解与规划物理世界

从下一个token预测到下一个对象预测，我们如何重新思考AI生成与机器人控制引言：大模型的“顺序陷阱” 在人工智能领域，以GPT为代表的大语言模型通过预测下一个token（文本片段）的方式，展现了令人惊叹的文本理解和生成能力。然而，这种自回归生成范式本质上是一种顺序处理…...

编程新知 2026/4/4 22:01:52

新企业应该优先选择SEO还是网络推广_SEO和网络推广的具体操作方法有哪些

新企业应该优先选择SEO还是网络推广_SEO和网络推广的具体操作方法有哪些在数字化营销的时代，新企业在选择推广策略时面临着两大选择：SEO（搜索引擎优化）和网络推广。两者各有优劣，本文将详细探讨新企业应优先选择哪种…...

编程新知 2026/4/4 20:09:09

从Python入门到AI项目实战：以NLP-StructBERT部署为第一个完整案例

从Python入门到AI项目实战：以NLP-StructBERT部署为第一个完整案例你是不是刚学Python，对着书本上的print(“Hello World”)感觉有点无聊？或者学了一堆语法，却不知道这些for循环、if判断到底能用来做什么实际的东西？ …...

编程新知 2026/4/4 19:18:32

如何基于SecGPT构建企业级安全智能助手：完整实践指南

如何基于SecGPT构建企业级安全智能助手：完整实践指南【免费下载链接】SecGPT SecGPT网络安全大模型项目地址: https://gitcode.com/gh_mirrors/se/SecGPT SecGPT作为一款专业的网络安全大模型，为企业构建智能化安全防护体系提供了强大支持。本文…...

编程新知 2026/4/4 19:14:31