js制作简易留言板效果

用原生JS写一个留言板，制作核心代码不超过50行。简易不需要后端，板效不需要数据库，制作数据存在数组里，简易页面刷新就清空——但逻辑跑通了，板效接后端只是制作替换存储层的事。

先看HTML骨架。简易一个输入框、板效一个按钮、制作一个列表容器，简易就这三样：

```html ```

结构够简单，板效但有个细节容易忽略：input 和 button 之间不要用 form 包起来，制作否则点按钮会触发表单提交导致页面刷新。简易新手常踩这个坑，板效调试半天以为是JS没生效，其实是页面重载了。

接下来是JS。思路很直白——监听按钮点击，取值，插入DOM。但直接这么写会有一个问题：每次都用 innerHTML += 拼接，等于把整个列表重新渲染一遍，已有的事件监听全部丢失。留言板功能简单可能感觉不到，但如果每条留言后面要加“删除”按钮，这个坑就藏不住了。

```js const input = document.getElementById('msgInput'); const btn = document.getElementById('submitBtn'); const list = document.getElementById('msgList'); btn.addEventListener('click', function () { const text = input.value.trim(); if (!text) return; const li = document.createElement('li'); li.textContent = text; list.appendChild(li); input.value = ''; input.focus(); }); ```

用 createElement 和 appendChild 替代字符串拼接，好处是每个节点独立存在，后续要加删除按钮、时间戳、头像，直接往 li 里面塞子元素就行，不影响其他留言。

input.value.trim() 这一步别省。用户输入一串空格再点发布，不 trim 的话会插入一条看起来空白的留言，体验很怪。trim 之后判断空字符串，直接 return，什么都不做。

发布完清空输入框并重新聚焦，这个小动作看着不起眼，但连续发多条留言时不用每次都去点输入框，手感差别很大。我试过不加 focus，发完一条想再发一条，鼠标得重新定位到输入框，多来几次就烦了。

现在功能跑通了，但留言板通常需要显示发布时间。加一个简单的时间处理：

```js const now = new Date(); const timeStr = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }); const timeEl = document.createElement('span'); timeEl.className = 'time'; timeEl.textContent = timeStr; li.appendChild(timeEl); ```

toLocaleTimeString 比手动拼 getHours 和 getMinutes 省事，还能自动补零。'zh-CN' 这个参数保证格式是“14:05”而不是“2:05 PM”，看个人习惯，但中文环境下前者更顺眼。

样式方面不多展开，但有一条建议：留言列表用 flex 布局，每条 li 设成 flex-direction: column，时间戳自然落在内容下方，不需要额外定位。CSS 写三五行就够，重点还是JS逻辑本身。

如果要加删除功能，事件委托比逐个绑定高效。在 ul 上监听 click，判断 target 是不是删除按钮，然后 removeChild 对应的 li。这样新增留言不需要重新绑定事件，代码也不会随着留言数量增长而变臃肿。

整个留言板最关键的决策就一个：用 DOM API 操作节点而不是拼 innerHTML。这个选择决定了后续扩展是顺水推舟还是推倒重来。代码量差不多，但维护成本差很远。