如何使用Vanilla Javascript捕获消息发送/按钮按下时的日期时间

功能逻辑 #

通过监听发送按钮点击事件、输入框回车按键事件两个触发场景，在消息发送时实时获取当前时间，和消息内容一同渲染到消息列表对应位置即可。

完整可运行代码 #

HTML 结构 #

<!-- 消息展示容器 -->
<div id="messageList"></div>

<!-- 输入操作区 -->
<div class="chat-input-wrapper">
  <input type="text" id="msgInput" placeholder="请输入消息">
  <button id="sendBtn">SEND</button>
</div>

Vanilla JS 逻辑 #

// 提前获取DOM节点，避免重复查询
const msgInput = document.getElementById('msgInput');
const sendBtn = document.getElementById('sendBtn');
const msgList = document.getElementById('messageList');

/**
 * 时间格式化函数
 * 可根据需求调整输出格式
 */
function getFormattedTime() {
  const now = new Date();
  return new Intl.DateTimeFormat('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false // 关闭12小时制，设为true可显示上午/下午
  }).format(now);
}

// 发送消息公共逻辑，避免重复写相同代码
function handleSendMsg() {
  const msgContent = msgInput.value.trim();
  // 空消息不发送
  if (!msgContent) return;

  // 获取当前发送时间
  const sendTime = getFormattedTime();

  // 创建单条消息DOM节点
  const msgItem = document.createElement('div');
  msgItem.className = 'msg-item';
  // 插入消息内容和对应时间
  msgItem.innerHTML = `
    <span class="msg-content">${msgContent}</span>
    <span class="msg-time">${sendTime}</span>
  `;

  // 消息追加到列表末尾
  msgList.appendChild(msgItem);
  // 清空输入框
  msgInput.value = '';
}

// 监听SEND按钮点击事件
sendBtn.addEventListener('click', handleSendMsg);

// 监听输入框回车事件
msgInput.addEventListener('keydown', (e) => {
  // 按下Enter键触发发送
  if (e.key === 'Enter') {
    handleSendMsg();
  }
});

自定义调整说明 #

• 要修改时间显示格式，只需调整getFormattedTime函数里Intl.DateTimeFormat的配置项即可，比如需要显示年月日，添加year: 'numeric', month: '2-digit', day: '2-digit'参数就行。
• 如果需要区分自己和对方的消息，只需要在创建msgItem的时候根据发送方添加不同的类名，调整样式即可。

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