Question

我还在学习HTML / CSS，所以请期待下面的一个天真的问题。话虽如此，我想创建一个网页（不是弹出的聊天框或移动类型的聊天界面）来模拟一个简单的聊天界面。

Q1：我想知道用于插入聊天实例的HTML元素。如果我把它全部放在<div id='chats'>中，每次我添加新实例（新的传入聊天）时，页面都会变长。我想限制窗口在框架中显示这些聊天实例，因此网页的长度保持不变。然后，用户可以在该窗口内上下滚动以阅读聊天。我该如何做到这一点？我认为StackOverflow用于推荐可能对我的问题有答案的问题并使用overflow-y: scroll。这是要走的路吗？

Q2：假设我使用overflow-y: scroll，我怎样才能保持最新的聊天实例始终是重新加载后显示的实例？我假设如果我添加一个新的聊天<div>，除非我做一些特别的事情来重点关注它，否则它不会获得焦点？

问题3：是否有人建议的网页的开源聊天用户界面？

感谢您的所有答案！

Answer 1

在回答任何问题之前，您有两件事情遗失：一，您不会在任何地方提及javascript，这将是此项目的要求。第二，如果您希望多人能够使用此聊天，您将需要某种服务器技术来传递消息。

A1：是的＆＃34;溢出-y：滚动＆＃34;是要走的路

<div id="chats" style="width: 400px; height: 400px; overflow-y: scroll;">

A2：好吧，也许我不理解这个问题。您是否只想在页面重新加载时滚动到聊天的底部（最新消息）？

如果是这样，那么在页面加载时调用这样的东西就可以了：

var chatDiv = document.getElementById("chats");
chatDiv.scrollTop = chatDiv.scrollHeight;

A3：不知道您将使用的服务器端框架技术（Node.js，PHP，ASP.NET）。你不可能指出一个特定的开源解决方案，但这不是一件非常困难的事情，我认为它们对于每个服务器端框架来说都是多种多样的。

这是一个简单的单用户实现。如上所述，要使其与多个用户一起工作，您必须通过服务器进行中继，或者至少使用服务器发送每个聊天者的连接信息。

https://jsfiddle.net/3yvzp93m/4/

＆＃13;

function writeMessage(form){
    var now = new Date().toLocaleString()
    var user = form.username.value;
    var message = form.msg.value;
    document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + now  + " | " + user + " said: " + message + "<br />";
}

＆＃13;

<div id="chat" style="width: 100%; height: 150px; overflow-y: scroll;">
</div>
<form name="message" method="POST">
  <label for="username">Username</label>
  <input type="text" name="username" />
  <label for="msg">Message</label>
  <input type="text" name="msg" />
  <input type="button" name="button" value="Submit" onClick="writeMessage(this.form)" />
</form>

＆＃13;

Answer 2

<强> Q1：对于聊天实例，如果您计划在同一网页上生成多个类，请考虑使用类而不是ID，因为ids旨在用于标识DOM中的唯一元素。

例如：

<h1>Chat Box</h1>
<div id = "chatbox">
    <div class="message">
        <span class="user">User says:</span>
        <span>first message</span>
    </div>
    <div class="message">
        <span class="user">User says:</span>
        <span>first message</span>
    </div>
    <div id ="last" class="message">
        <span class="user">User says:</span>
        <span>last message</span>
    </div>
</div>

您可以看到有两个独特的元素，使用ids （＃chatbox和#last）在DOM中识别这些元素。整个DOM中也存在非唯一的元素，如消息，这些元素应该使用类（。message和.user）来识别。

Css代码可能类似于：

<style>
    #chatbox {
        height: 2em;
        overflow-y:scroll;
        border: 1px solid black;
    }
    #chatbox>.message{
        border: 1px dotted black;
    }
    #chatbox>.message>.user{
        font-weight: bold;
    }
</style>

如果您只想阻止网页变大，那么溢出y：滚动就可以了。只需认真考虑用于划分聊天箱高度的单位，em，％，px等。

<强> Q2：在纯HTML / CSS世界中，您的选项是有限的，最简单的一个是使用命名锚点，使用井号，您可以指定要转到的网页的哪个部分。在聊天框的情况下，您可以将“最后”ID添加到上一个消息元素，然后只需拨打 yourdomain.com \ chatbox.html＃last 。这将呈现这样的东西。

问题3：我建议使用JQuery UI，非常好用，还有几个聊天框插件。

注意事项：由于您正在学习HTML / CSS，我将我的答案集中在主题上，如果您没有时间设置服务器来运行这种应用程序，运动，我会建议看看Firebase此服务将为您抽象存储和异步行为。学习JS是必须的，JQuery是最受欢迎的库之一，可能是一个很好的起点。不要过分关注从Jquery学习记忆的东西，而是更多地学习它背后的过程以及所有这些不同的部分HTML / CSS / JS如何协同工作。

聊天HTML页面建议

2 个答案: