基于CSS和jQuery实现类Twitter文本计数器的技术需求咨询

没问题，我帮你实现了这个完全符合需求的Twitter风格文本计数器，下面是完整的代码方案和细节说明：

这个实现完美匹配你的需求：输入时进度条从绿色递增到75%，之后切换为黄色递增至98%，字符数≥400时触发红色状态并添加高亮类；删除文本时所有状态同步反向变化，还加入了平滑过渡效果提升体验。

1. HTML结构 #

先搭建基础的交互容器，包含文本输入框、进度条和字符计数显示：

<div class="text-counter-container">
  <textarea id="tweetInput" placeholder="输入你的文本..." rows="4"></textarea>
  <div class="progress-bar-wrapper">
    <div id="progressBar" class="progress-bar"></div>
  </div>
  <div id="charCount" class="char-count">0/400</div>
</div>

2. CSS样式 #

定义各状态的视觉样式，包括进度条的颜色切换、高亮效果和布局：

.text-counter-container {
  max-width: 500px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

#tweetInput {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  font-size: 16px;
  resize: vertical;
}

.progress-bar-wrapper {
  height: 4px;
  background-color: #e1e8ed;
  border-radius: 2px;
  margin: 8px 0;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  transition: width 0.2s ease, background-color 0.2s ease;
  border-radius: 2px;
}

.progress-bar.green {
  background-color: #17bf63;
}

.progress-bar.yellow {
  background-color: #f5a623;
}

.progress-bar.red {
  background-color: #e0245e;
}

.char-count {
  text-align: right;
  font-size: 14px;
  color: #657786;
}

.char-count.highlight {
  color: #e0245e;
  font-weight: bold;
}

3. JavaScript核心逻辑 #

监听文本输入变化，实时计算字符数并同步更新进度条和计数状态：

const tweetInput = document.getElementById('tweetInput');
const progressBar = document.getElementById('progressBar');
const charCount = document.getElementById('charCount');
const maxChars = 400;

// 监听所有文本变化事件（输入、退格、粘贴等）
tweetInput.addEventListener('input', updateCounter);

function updateCounter() {
  const currentChars = tweetInput.value.length;
  const percentage = (currentChars / maxChars) * 100;

  // 更新字符计数文本
  charCount.textContent = `${currentChars}/${maxChars}`;
  
  // 控制进度条宽度，避免超过100%
  progressBar.style.width = `${Math.min(percentage, 100)}%`;

  // 根据字符数切换状态
  if (currentChars >= maxChars) {
    progressBar.className = 'progress-bar red';
    charCount.classList.add('highlight');
  } else if (percentage > 75) {
    progressBar.className = 'progress-bar yellow';
    charCount.classList.remove('highlight');
  } else {
    progressBar.className = 'progress-bar green';
    charCount.classList.remove('highlight');
  }
}

关键细节说明 #

• 使用input事件监听文本变化，覆盖了退格、粘贴、拖拽输入等所有文本修改场景
• 通过CSS的transition属性实现进度条宽度和颜色的平滑过渡
• 用Math.min(percentage, 100)确保进度条不会超出容器范围
• 类名切换逻辑严格对应你要求的三个状态区间，删除文本时会自动反向切换

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