如何为姓名选择器网站的每个显示数字添加边框？

要实现每个数字带边框的效果，核心是给每个数字单独套一个可设置样式的HTML元素（比如<span>），再通过CSS给这个元素添加边框样式。以下是具体修改方案：

修改JavaScript代码 #

原来的代码直接把数字用空格拼接后插入DOM，现在我们要把每个数字包裹在带类名的<span>里：

function funkytown() {
   document.getElementById("btn").onclick = number;
}

function number() {
   var randomize = [],
   numbers = Array.from({length: 100}, (_, i) => i + 1);

   for (var i = 0; i < 50; i++) {
      // 取出splice返回数组里的实际数字
      randomize.push(numbers.splice(Math.floor(Math.random() * numbers.length), 1)[0]);
   }

   // 把每个数字用带类名的span包裹，再拼接成HTML
   var numberElements = randomize.map(num => `<span class="number-box">${num}</span>`);
   document.getElementById("text").innerHTML = numberElements.join(" ");
}

funkytown();

添加CSS样式 #

在你的样式表（或页面的<style>标签）里添加以下样式，定义数字的边框和排版：

.number-box {
  /* 基础边框样式 */
  border: 1px solid #007bff;
  /* 内边距：让数字和边框保持间距 */
  padding: 4px 8px;
  /* 外边距：让数字之间有合理间隔 */
  margin: 0 4px 4px 0;
  /* 可选：圆角让边框更柔和 */
  border-radius: 4px;
  /* 可选：统一字体大小 */
  font-size: 14px;
  display: inline-block;
}

效果说明 #

修改后，点击GO按钮生成的每个数字都会被一个带蓝色边框的小盒子包裹，排版整齐且间隔合理。你可以根据网站风格，调整CSS里的边框颜色、粗细、内边距、圆角等参数。

内容的提问来源于stack exchange，提问作者aufa