实时显示未读消息数量

以下是一种解决方法，使用JavaScript和HTML实现实时显示未读消息数量的功能：

HTML部分：

<div id="unread-count">0</div>
<button onclick="addUnreadMessage()">收到新消息</button>

JavaScript部分：

var unreadCount = 0;

function addUnreadMessage() {
  unreadCount++;
  document.getElementById("unread-count").innerText = unreadCount;
}

在上面的代码中，我们首先在HTML中创建了一个用于显示未读消息数量的<div>元素，其中id属性设置为unread-count。然后，我们创建了一个按钮元素，当点击按钮时，会调用JavaScript中的addUnreadMessage()函数。

在JavaScript中，我们创建了一个变量unreadCount来存储未读消息的数量，并初始化为0。当用户点击按钮时，addUnreadMessage()函数会将未读消息数量加1，并将更新后的数量显示在<div>元素中。

这样，每当用户收到新消息并点击按钮时，页面上的未读消息数量就会实时更新。