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

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="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);});
});
http://www.lryc.cn/news/96668.html

相关文章:

  • C. Maximum Set
  • 基于springboot+vue学生宿舍报修公寓管理系统
  • 缓存和数据库一致性问题分析
  • 用Rust生成Ant-Design Table Columns | 京东云技术团队
  • java.lang.ClassNotFoundException: sun.misc.BASE64Decoder
  • Unity进阶--对象池数据场景管理器笔记
  • 【Seata】微服务集成seata
  • 解决react,<img>src使用require方法引入图片不显示问题
  • 从小白到大神之路之学习运维第67天-------Tomcat应用服务 WEB服务
  • 图解SQL基础知识,小白也能看懂的SQL文章
  • 自动驾驶感知系统-毫米波雷达
  • Esp32_Arduino接入腾讯云笔记
  • python简单入门
  • 如何快速从csv文件搭建一个简单的神经网络模型(回归)
  • Pytorch深度学习-----DataLoader的用法
  • macOS Ventura 13.5 (22G74) Boot ISO 原版可引导镜像下载
  • 【机器学习】 奇异值分解 (SVD) 和主成分分析 (PCA)
  • 如何用logging记录python实验结果?
  • C语言假期作业 DAY 03
  • 使用serverless实现从oss下载文件并压缩
  • 从上到下打印二叉树
  • 【推荐】排序模型的调优
  • 负载均衡安装配置详解
  • Java-逻辑控制
  • UE 透明渲染次序
  • 【C++】多态原理剖析,Visual Studio开发人员工具使用查看类结构cl /d1 reportSingleClassLayout
  • vue实现flv格式视频播放
  • iptables安全技术和防火墙
  • 微信小程序开发5
  • 【算法题】2681. 英雄的力量