如何使用Bootstrap和JavaScript实现带背景色切换单选按钮的留言板功能

阿华AIGC实验室

2026-4-14

Hey Kimgeek！我来帮你搞定这个留言板的颜色切换问题，其实思路很简单，咱们一步步来实现它～

首先，添加颜色选择的单选按钮组

咱们先在输入框上方加上Bootstrap风格的单选按钮，让用户能选择粉色或灰色。注意要把单选按钮的name设成一样的，这样才能互斥选择，每个按钮的value对应我们要给卡片头部用的背景色类名：

<!-- 颜色选择单选按钮组 -->
<div class="mb-3">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="headerColor" id="pinkColor" value="bg-pink" checked>
    <label class="form-check-label" for="pinkColor">粉色</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="headerColor" id="grayColor" value="bg-secondary">
    <label class="form-check-label" for="grayColor">灰色</label>
  </div>
</div>

然后，自定义粉色背景样式

Bootstrap默认没有现成的粉色背景类，所以咱们自己写个简单的CSS，和Bootstrap的风格保持一致：

.bg-pink {
  background-color: #f8d7da !important; /* 这个是Bootstrap风格的浅粉色，你也可以换成自己喜欢的粉色值 */
  color: #721c24;
}

接下来修改你的`addMessage`函数

原来的函数里卡片头部用的是固定的bg-primary，现在咱们要动态获取选中的颜色类，替换掉它，还要补上把新卡片添加到留言板的步骤（你原来的代码里漏了这一步哦）：

// 补全你用到的辅助函数
function getCurrentUser() {
  return "我"; // 可以换成实际的用户名逻辑，比如从登录信息里取
}

function formatDateTime() {
  const now = new Date();
  return now.toLocaleString(); // 格式化成本地时间字符串
}

function addMessage() {
  const input = document.getElementById('messageInput');
  const messageText = input.value.trim();
  
  // 空内容就不提交啦
  if (messageText === '') return;

  // 获取选中的颜色类名
  const selectedColor = document.querySelector('input[name="headerColor"]:checked').value;

  // 构建卡片HTML，把固定的bg-primary换成selectedColor
  const messageHTML = `
  <div class="card mb-3 shadow-sm">
    <div class="card-header ${selectedColor}">
      <div class="text-muted">
        Posted by ${getCurrentUser()} at ${formatDateTime()}
      </div>
    </div>
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-top">
        <div class="flex-grow-1">
          <div class="message-text">${messageText}</div>
        </div>
        <button class="btn btn-danger btn-sm ms-2" onclick="this.closest('.card').remove()">Delete</button>
      </div>
    </div>
  </div>`;

  // 把新卡片添加到留言板的最顶部，实现堆叠效果
  document.getElementById('messageBoard').insertAdjacentHTML('afterbegin', messageHTML);
  // 清空输入框，方便继续输入
  input.value = '';
}

// 加上回车提交的功能，提升用户体验
document.getElementById('messageInput').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    addMessage();
  }
});

最后整合完整的代码

把所有部分拼起来，就是完整的留言板啦：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的留言板</title>
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .bg-pink {
      background-color: #f8d7da !important;
      color: #721c24;
    }
  </style>
</head>
<body class="container mt-5">
  <h2>我的留言板</h2>

  <!-- 颜色选择单选按钮组 -->
  <div class="mb-3">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="headerColor" id="pinkColor" value="bg-pink" checked>
      <label class="form-check-label" for="pinkColor">粉色</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="headerColor" id="grayColor" value="bg-secondary">
      <label class="form-check-label" for="grayColor">灰色</label>
    </div>
  </div>

  <!-- Input group -->
  <div class="d-flex justify-content mb-5">
    <div class="input-group">
      <input type="text" class="form-control" id="messageInput" placeholder="输入留言内容">
      <button type="button" class="btn btn-primary" onclick='addMessage()'>发送</button>
    </div>
  </div>

  <div class="message-board" id="messageBoard"></div>

  <!-- 引入Bootstrap JS（可选，暂时用不到但可保留） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function getCurrentUser() {
      return "我";
    }

    function formatDateTime() {
      const now = new Date();
      return now.toLocaleString();
    }

    function addMessage() {
      const input = document.getElementById('messageInput');
      const messageText = input.value.trim();
      if (messageText === '') return;

      const selectedColor = document.querySelector('input[name="headerColor"]:checked').value;

      const messageHTML = `
      <div class="card mb-3 shadow-sm">
        <div class="card-header ${selectedColor}">
          <div class="text-muted">
            Posted by ${getCurrentUser()} at ${formatDateTime()}
          </div>
        </div>
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-top">
            <div class="flex-grow-1">
              <div class="message-text">${messageText}</div>
            </div>
            <button class="btn btn-danger btn-sm ms-2" onclick="this.closest('.card').remove()">Delete</button>
          </div>
        </div>
      </div>`;

      document.getElementById('messageBoard').insertAdjacentHTML('afterbegin', messageHTML);
      input.value = '';
    }

    // 回车提交事件
    document.getElementById('messageInput').addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        addMessage();
      }
    });
  </script>
</body>
</html>

这样一来，你点击发送按钮或者按回车时，就会根据选中的单选按钮给新卡片的头部设置对应的颜色啦，完全满足你的需求～

备注：内容来源于stack exchange，提问作者Kimgeek