新增第203个小实例：特殊验证码输入框

2023-01-30 17:53:39 +08:00 · 2023-01-30 17:53:39 +08:00 · 4281c781ae
parent a38913fe79
commit 4281c781ae
4 changed files with 160 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -210,6 +210,7 @@
 200. HTML5+CSS3+JS小实例：网站实现一键切换暗色主题
 201. HTML5+CSS3小实例：左右摇晃的输入框
 202. HTML5+CSS3+JS小实例：过年3D烟花秀
+203. HTML5+CSS3+JS小实例：特殊验证码输入框

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/203/203.css
+++ b/code/203/203.css
@ -0,0 +1,67 @@
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    /* 100%窗口高度 */
+    min-height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2c3e50;
+}
+.ipt-wrap{
+    /* 相对定位 */
+    position: relative;
+}
+.ipt-hidden{
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    opacity: 0;
+}
+.ipt-content{
+    display: flex;
+}
+.ipt-item{
+    width: 50px;
+    height: 65px;
+    border-radius: 6px;
+    background-color: #3f566e;
+    border: 1px solid #3f566e;
+    margin: 0 10px;
+    color: #fff;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+/* 激活态 */
+.ipt-item.active{
+    border-color: #fff;
+}
+/* 光标 */
+.ipt-item.active::after{
+    content: '';
+    width: 1px;
+    height: 30px;
+    background-color: #fff;
+    /* 执行动画：动画名 时长 线性的 无限播放 来回轮流播放 */
+    animation: flicker 0.5s linear infinite alternate;
+}
+
+/* 定义动画 */
+@keyframes flicker {
+    0%{
+        opacity: 0;
+    }
+    100%{
+        opacity: 1;
+    }
+}
--- a/code/203/203.html
+++ b/code/203/203.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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>特殊验证码输入框</title>
+    <link rel="stylesheet" href="203.css">
+</head>
+<body>
+    <div class="ipt-wrap">
+        <input type="text" class="ipt-hidden">
+        <div class="ipt-content">
+            <p class="ipt-item"></p>
+            <p class="ipt-item"></p>
+            <p class="ipt-item"></p>
+            <p class="ipt-item"></p>
+            <p class="ipt-item"></p>
+            <p class="ipt-item"></p>
+        </div>
+    </div>
+</body>
+</html>
+<script src="203.js"></script>
--- a/code/203/203.js
+++ b/code/203/203.js
@ -0,0 +1,68 @@
+// 要操作的元素
+const input=document.querySelector('.ipt-hidden');
+const items=document.querySelectorAll('.ipt-item');
+
+// 正则表达式：6位 0-9
+const reg=/^[0-9]{0,6}$/;
+// 临时存储输入的值
+let temp_val='';
+
+// 输入框获得焦点事件
+input.addEventListener('focus',()=>{
+    // 光标移到最后
+    input.setSelectionRange(input.value.length-1,input.value.length);
+    const val=input.value;
+    if(!val){
+        // 未输入时，默认第一格为激活态
+        items[0].classList.add('active');
+        return;
+    }
+    // 判断哪一个格子需要设置激活态样式
+    if(val.length<items.length){
+        items[val.length].classList.add('active');
+    }
+    // 最后一格
+    if(val.length==items.length){
+        items[val.length-1].classList.add('active');
+    }
+});
+// 输入框失去焦点事件
+input.addEventListener('blur',()=>{
+    // 移除激活态样式
+    items.forEach(item=>{
+        item.classList.remove('active');
+    })
+});
+// 输入框输入事件
+input.addEventListener('input',(e)=>{
+    // 先清空文本并移除激活态样式
+    items.forEach(item=>{
+        item.textContent='';
+        item.classList.remove('active');
+    })
+    // 获取输入的值
+    const val=e.target.value;
+    // 正则验证
+    if(reg.test(val)){
+        temp_val=val;
+    }else{
+        input.value=temp_val;
+    }
+    // 将输入的值拆分为数组
+    const arr=input.value.split('');
+    if(!arr.length){
+        // 没输入，默认第一格为激活态
+        items[0].classList.add('active');
+    }
+    // 循环设置每一格的文本和样式
+    arr.forEach((item,index)=>{
+        items[index].textContent=item;
+        items[index].classList.remove('active');
+        if(items[index+1]){
+            items[index+1].classList.add('active');
+        }
+        if(index==items.length-1){
+            items[index].classList.add('active');
+        }
+    })
+});