JavaScript实现淘宝京东6位数字支付密码效果

要实现淘宝京东6位数字支付密码效果，可以通过JavaScript的键盘事件来实现。本攻略将分为以下几个部分：

1. HTML布局
2. CSS样式设置
3. JavaScript代码实现

1. HTML布局

使用HTML创建一个输入框，然后在输入框下面添加6个小圆点表示输入框中的数字。

<div class="password-wrapper">
  <input type="tel" class="password-input" maxlength="6">
  <div class="password-circles">
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
  </div>
</div>

2. CSS样式设置

使用CSS样式设置输入框和小圆点的样式，具体细节可以根据自己的需求进行调整。

.password-wrapper {
  position: relative;
  width: 300px;
  height: 50px;
  margin: 0 auto;
}
.password-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  font-size: 24px;
  text-align: center;
  border: 0;
  outline: none;
}
.password-circles {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-right: 10px;
}
.circle.active {
  background-color: #FF6600;
}

3. JavaScript代码实现

在JavaScript中，可以通过键盘事件监听到用户输入的数字，并且根据输入的数字来控制圆点的显示和隐藏。

let input = document.querySelector('.password-input');
let circles = document.querySelectorAll('.circle');

input.addEventListener('input', function() {
  let value = this.value;
  for (let i = 0; i < circles.length; i++) {
    if (value.length > i) {
      circles[i].classList.add('active');
    } else {
      circles[i].classList.remove('active');
    }
  }
});

input.addEventListener('keydown', function(e) {
  if (e.keyCode === 8 && this.value === '') {
    circles[0].classList.remove('active');
  }
});

上述代码中，首先获取输入框和小圆点的DOM节点，然后监听输入框的input事件和keydown事件。当input事件触发时，获取输入框中的值，并且根据输入的长度控制小圆点的显示和隐藏。当keydown事件中按下了退格键且输入框中的值为空时，将第一个小圆点的显示状态改为未激活状态。

示例1：实现密码强度的判断

在上述代码的基础上，我们可以根据输入框中数字的数量来判断密码的强度。例如，当输入框中的数字不足4个时，密码强度为弱；输入框中的数字为4-5个时，密码强度为中等；当输入框中的数字等于6个时，密码强度为强。可以使用下面的代码实现：

let input = document.querySelector('.password-input');
let circles = document.querySelectorAll('.circle');

input.addEventListener('input', function() {
  let value = this.value;
  for (let i = 0; i < circles.length; i++) {
    if (value.length > i) {
      circles[i].classList.add('active');
    } else {
      circles[i].classList.remove('active');
    }
  }

  let strength = document.querySelector('.password-strength');
  if (value.length < 4) {
    strength.innerText = '弱';
    strength.style.color = 'red';
  } else if (value.length < 6) {
    strength.innerText = '中';
    strength.style.color = 'orange';
  } else {
    strength.innerText = '强';
    strength.style.color = 'green';
  }
});

在HTML中，可以添加一个用于显示密码强度的标签：

<div class="password-wrapper">
  <input type="tel" class="password-input" maxlength="6">
  <div class="password-circles">
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
  </div>
  <div class="password-strength"></div>
</div>

示例2：实现密码输入错误的提示

在上述代码的基础上，我们还可以通过在keydown事件中监听退格键来实现密码输入错误后进行提示。

let input = document.querySelector('.password-input');
let circles = document.querySelectorAll('.circle');
let wrong = document.querySelector('.wrong-tip');

input.addEventListener('input', function() {
  let value = this.value;
  for (let i = 0; i < circles.length; i++) {
    if (value.length > i) {
      circles[i].classList.add('active');
    } else {
      circles[i].classList.remove('active');
    }
  }

  if (value.length === 6 && value !== '123456') {
    this.value = '';
    for (let i = 0; i < circles.length; i++) {
      circles[i].classList.remove('active');
    }
    wrong.style.visibility = 'visible';
  } else {
    wrong.style.visibility = 'hidden';
  }
});

input.addEventListener('keydown', function(e) {
  if (e.keyCode === 8 && this.value === '') {
    circles[0].classList.remove('active');
  }
});

在HTML中，可以添加一个用于显示密码输入错误提示的标签：

<div class="password-wrapper">
  <input type="tel" class="password-input" maxlength="6">
  <div class="password-circles">
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
    <span class="circle"></span>
  </div>
  <div class="password-strength"></div>
  <div class="wrong-tip">密码错误，请重新输入</div>
</div>

以上是实现淘宝京东6位数字支付密码效果的完整攻略，通过HTML、CSS和JavaScript的结合，可以实现一个酷炫的支付密码输入框。