JavaScript 随机点名效果 - 逐个字母显示

以下是一个基于 JavaScript 的随机点名效果，每次随机出一个名字，并逐个字母显示出来：

HTML:

<button onclick='randomName()'>随机点名</button>
<p id='name'></p>

JavaScript:

var names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
var nameElem = document.getElementById('name');
var currentIndex = 0;
var intervalId;

function randomName() {
  clearInterval(intervalId); // 先清除之前的计时器
  currentIndex = 0; // 重置当前字母索引
  var index = Math.floor(Math.random() * names.length); // 随机出一个名字的索引
  var name = names[index];
  intervalId = setInterval(function() {
    nameElem.innerHTML = name.slice(0, currentIndex) + '_'; // 显示当前字母
    currentIndex++;
    if (currentIndex > name.length) {
      clearInterval(intervalId); // 当全部显示完后停止计时器
      nameElem.innerHTML = name; // 显示完整的名字
    }
  }, 100); // 每隔100毫秒显示下一个字母
}

运行效果：