前端H5实现『短信验证码输入效果』开发思路分享

前端

2023-10-26 16:17:41

一、需求分析

在开始开发之前，我们需要先了解一下需求。本文的需求是实现一个短信验证码输入效果，主要功能包括：

进入页面自动触发发送短信验证码；
手机系统如果支持自动识别短信验证码，就自动填充；
支持手动输入短信验证码；
点击数字框，弹起数字键盘，输入数字后，边框变为绿色。

二、技术选型

实现上述需求，我们可以使用以下技术：

HTML：用于构建页面的结构；
CSS：用于美化页面的样式；
JavaScript：用于实现页面的交互逻辑；
jQuery：用于简化JavaScript的开发。

三、开发步骤

1. HTML结构

首先，我们先搭建一下页面的HTML结构。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="input-group">
      <input type="text" class="input-field" id="code1">
      <input type="text" class="input-field" id="code2">
      <input type="text" class="input-field" id="code3">
      <input type="text" class="input-field" id="code4">
    </div>
    <button type="button" class="btn btn-primary" id="btn-send">发送验证码</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. CSS样式

接下来，我们来编写一下页面的CSS样式。

/* 容器样式 */
.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* 输入框组样式 */
.input-group {
  display: flex;
  justify-content: center;
}

/* 输入框样式 */
.input-field {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  text-align: center;
  font-size: 24px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
}

/* 发送按钮样式 */
#btn-send {
  margin-left: 10px;
  background-color: #333;
  color: #fff;
}

/* 错误提示样式 */
.error {
  color: red;
}

/* 数字键盘样式 */
.keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 键盘按键样式 */
.key {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  font-size: 24px;
}

/* 键盘按键点击样式 */
.key:active {
  background-color: #ccc;
}

3. JavaScript交互逻辑

最后，我们来编写一下页面的JavaScript交互逻辑。

// 获取元素
const code1 = document.getElementById('code1');
const code2 = document.getElementById('code2');
const code3 = document.getElementById('code3');
const code4 = document.getElementById('code4');
const btnSend = document.getElementById('btn-send');

// 键盘元素
const keyboard = document.createElement('div');
keyboard.classList.add('keyboard');
keyboard.innerHTML = '<div class="key" data-num="1">1</div>' +
  '<div class="key" data-num="2">2</div>' +
  '<div class="key" data-num="3">3</div>' +
  '<div class="key" data-num="4">4</div>' +
  '<div class="key" data-num="5">5</div>' +
  '<div class="key" data-num="6">6</div>' +
  '<div class="key" data-num="7">7</div>' +
  '<div class="key" data-num="8">8</div>' +
  '<div class="key" data-num="9">9</div>' +
  '<div class="key" data-num="0">0</div>' +
  '<div class="key" data-num="backspace">后退</div>';

// 数字键盘显示状态
let keyboardShow = false;

// 验证码发送倒计时
let countdown = 60;

// 发送验证码
const sendCode = () => {
  // 显示倒计时
  btnSend.innerHTML = `重新发送(${countdown}s)`;

  // 开始倒计时
  const timer = setInterval(() => {
    countdown--;
    btnSend.innerHTML = `重新发送(${countdown}s)`;

    if (countdown === 0) {
      clearInterval(timer);
      btnSend.innerHTML = '发送验证码';
      btnSend.removeAttribute('disabled');
      countdown = 60;
    }
  }, 1000);

  // 发送验证码请求

  // ...
};

// 点击发送验证码按钮
btnSend.addEventListener('click', () => {
  if (btnSend.disabled) {
    return;
  }

  btnSend.setAttribute('disabled', true);
  sendCode();
});

// 输入框获取焦点
code1.addEventListener('focus', () => {
  if (!keyboardShow) {
    document.body.appendChild(keyboard);
    keyboardShow = true;
  }
});

// 输入框失去焦点
code1.addEventListener('blur', () => {
  if (keyboardShow) {
    document.body.removeChild(keyboard);
    keyboardShow = false;
  }
});

// 数字键盘按键点击
keyboard.addEventListener('click', (e) => {
  const target = e.target;

  if (target.classList.contains('key')) {
    const num = target.dataset.num;

    if (num === 'backspace') {
      // 删除最后一个数字
      code4.value = '';
      code3.value = '';
      code2.value = '';
      code1.focus();
    } else {
      // 输入数字
      if (code1.value === '') {
        code1.value = num;
        code2.focus();
      } else if (code2.value === '') {
        code2.value = num;
        code3.focus();
      } else if (code3.value === '') {
        code3.value = num;
        code4.focus();
      } else if (code4.value === '') {
        code4.value = num;
        code4.blur();
      }
    }
  }
});