如何用JavaScript实现点击按钮拆分100px宽度的随机背景色div？

嘿，这个需求实现起来其实挺直观的！我给你整一个完整的可运行方案，包含HTML、CSS和JavaScript，每部分都给你讲清楚～

1. HTML结构 #

咱们先搭好最基础的结构：一个用来装所有小div的容器，再加一个触发拆分的按钮。

<div class="container"></div>
<button id="splitBtn">点击拆分Div</button>

2. CSS样式 #

这里核心用Flex布局来让所有子div自动平分容器的100px宽度，再加点小样式让效果更清晰：

.container {
  width: 100px;
  display: flex;
  gap: 1px; /* 加个1px的间距，方便区分每个小div */
  margin: 20px 0;
}

.container > div {
  flex: 1; /* 关键属性：让每个子元素自动平分容器宽度 */
  height: 50px;
  border: 1px solid #fff; /* 白色边框增强视觉区分，避免颜色太相近混在一起 */
}

button {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

3. JavaScript逻辑 #

主要做三件事：生成随机颜色、维护当前div的数量、点击按钮时更新数量并重新渲染所有div：

// 生成随机RGB颜色的工具函数
function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

// 获取页面元素
const container = document.querySelector('.container');
const splitBtn = document.getElementById('splitBtn');

// 记录当前div的数量，初始是1个
let divCount = 1;

// 渲染对应数量的div的函数
function renderDivs() {
  // 先清空容器，避免旧的div残留
  container.innerHTML = '';
  // 循环创建指定数量的div，每个都设随机背景色
  for (let i = 0; i < divCount; i++) {
    const newDiv = document.createElement('div');
    newDiv.style.backgroundColor = getRandomColor();
    container.appendChild(newDiv);
  }
}

// 页面加载完成后，先渲染第一个初始div
renderDivs();

// 给按钮绑定点击事件：每次点击就增加div数量，然后重新渲染
splitBtn.addEventListener('click', () => {
  divCount++;
  renderDivs();
});

关键思路说明 #

• Flex布局的妙用：flex:1属性会让所有子元素自动分配容器的可用宽度，不管数量是多少，都能保证等宽，完美满足“100px内新增div”的需求。
• 重新渲染的逻辑：每次点击后直接清空容器再重新创建所有div，这样每个新生成的div都能拥有随机背景色，逻辑简单易懂，也避免了复杂的DOM操作。
• 随机颜色生成：用RGB格式生成随机颜色，实现起来简单，效果也足够随机。

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