這樣的一個樣式很簡單, 整體思路是首先在布局中要有一個真實的輸入框, 通過透明度隱藏掉。然后覆蓋層上開始寫自定義樣式, 通過動畫布局模擬出你想要的輸入框樣式。

下圖為美團App等短信驗證碼布局

接下來使用 vue3 + typescript 實現該功能

<!-- 模版布局 -->
<template>
  <div class="input-diy">
    <p>美團App驗證碼輸入框DEMO</p>
    <div class="input-wrap">
      <input 
        maxlength="4" 
        type="number" 
        v-model="currentPwd"
        />
      <span 
        v-for="(val, index) in pwdList" 
        :key="index"
        :class="customClass(index)">
        {{ pwdArr[index] }}
        </span>
    </div>
  </div>
</template>

// 邏輯代碼
<script lang="ts">
import { 
  ref, 
  watch,
  reactive, 
  defineComponent, 
} from 'vue';
export default defineComponent({
  setup() { 
      let currentPwd=ref<string>(''), // 輸入的驗證碼值
      pwdArr=reactive<string[]>([]), // 輸入框內的值
      pwdLength=ref<number | null>(0),  // 已經輸入的驗證碼長度，默認為0，顯示光標
      pwdList=reactive<boolean[]>([false, false, false, false]); // 初始化驗證碼數據
    
    watch(()=>{
      return currentPwd.value;
    }, (val)=>{
      watchCurrentPwd(val);
    })

    /**
     * 監聽input驗證碼改變
     */
    const watchCurrentPwd=(newVal: String)=> {
        let nval=newVal.toString().replace(/\s+/g,"");
        pwdLength.value=nval.length || 0; 
        pwdList.forEach((val: boolean, i: number)=> {
          pwdArr[i]=nval.slice(i, i + 1); // 獲取輸入inputvalue放入驗證碼框
        });
        if(nval.length > 4) { // 截取四位數據
          currentPwd.value=nval.slice(0, 4);
        } else if( nval.length===4 ) {
          pwdLength.value=null; // 輸完驗證碼 取消光標
        }
    } 

    /**
     * 自定義類名
     */
    const customClass=(index: Number)=> {
      return  index===pwdLength.value ? 'active' : '';
    }
    return {
      pwdArr,
      pwdList,
      pwdLength,
      currentPwd,
      customClass
    }
  }
});
</script>

/* CSS 樣式 */
<style  scope>
  .input-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    overflow: hidden;
  }

  /* 真實輸入框 */
  .input-wrap input {
    opacity: 0;
    color: transparent;
    position: absolute;
    top: 0;
    left: -50%;
    /*bottom: 0;*/
    width: 750px;
    height: 150%;
    z-index: 2;
    text-align: left;
  }

  /* 模擬驗證碼輸入框 */
  .input-wrap span {
    width: 60px;
    height: 60px;
    border-bottom: 2px solid #BDC2CC;
    margin-right: 25px;
    position: relative;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    color: #303747;

  }

  .input-wrap span:last-child {
    margin-right: 0;
  }

  /*模擬光標底部*/
  .input-wrap .active {
    border-bottom: 2px solid #22242A;
  }

  /*模擬光標閃爍*/
  .input-wrap .active:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 30px;
    display: block;
    width: 2px;
    height: 30px;
    background-color: #22242A;
    transform: translate(-50%, -50%);
    animation: focus 1s infinite;
  }

  .input-wrap-diy{
    position: relative;
  }

  /* 光標動畫 */
  @keyframes focus {
    0% {
      opacity: 1
    }
    50% {
      opacity: 1
    }
    51% {
      opacity: 0
    }
    99% {
      opacity: 0
    }
  }
</style>

你學廢了么? 如果想了解更多的web小程序開發知識, 請點贊收藏加關注啊。手擼不易！持續更新...

先，看一下要實現的效果，效果視頻如下：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

分析

1.按鈕點擊之后，會把按鈕禁用

2.同時按鈕里面 的內容也會變化，注意button里面的內容通過innerHTML修改

3.里面的秒數是有變化的，因此需要一個定時器

4.定義一個變量，在定時器里面，不斷遞減

5.如果變量為0說明到時間了，我們需要停止定時器，并且復原按鈕的初始狀態

代碼

天在小破站看到一個前端生成隨機驗證碼的視頻，感覺很有意思，就跟著操作了一下，成功了。

后來自己又想給它加一個提交按鈕，輸入并判斷驗證碼的正確性，也可以正常運行，但是我的代碼好像還是存在一些bug：

1.canvas標簽是繪圖容器，自帶屬性使它是一個默認300*150的容器，縮小canvs容器時，里面的繪圖也會變小，我沒有找到合適的方法去調整它的大小。

2.對于輸入框input，我使用了float浮動，為了使input輸入框和canvas里面的驗證碼并排，但是被vscode警告了。

這次的實戰練習也經歷了很多坎坷，但是也收獲很大。學習到了canvas標簽的用法、JS全局變量和局部變量、以及有關context的一些屬性和方法。

最后，希望路過的大佬，幫我看看bug，幫幫菜鳥。

附上源碼