本文介绍了如何使用HTML、CSS和JavaScript创建一个简单的实时聊天应用，包括设置初始值、样式设计和交互逻辑。通过实例展示了如何设置对话框布局、头像和文字输入，以及使用CSS实现不同元素的样式调整。
1.在页面上设置初始值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js聊天</title>
<linkrel="stylesheet" href="chat apparatus(css).css">
</head>
<body>
<divclass="Box">
<divclass="boxTop" id="boxTop">
<divclass="ATalk">
<spanclass="A-head_portrait">A</span>
<spanclass="AWord">Hi~ o(*￣▽￣*)ブ！</span>
</div>
<divclass="BSpeak">
<spanclass="BWord">hello~ o(.^▽^.)o!</span>
<spanclass="B-head_portrait">B</span>
</div>
</div>
<divclass="boxBottom">
<selectname="" id="who">
<optionvalue="0">A说：</option>
<optionvalue="1">B说：</option>
</select>
<inputtype="text" id="talkInput">
<buttonclass="sendBtn" id="sendBtn">发送</button>
</div>
</div>
<scriptsrc="chat apparatus(javascript).js"></script>
</body>
</html>
2.在style内设置元素的css样式
@charset"utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.Box{
width: 700px;
height: 600px;
border: 1px solid #666;
margin: 40px auto 0px;
background: #f9f9f9;
}
/*
overflow：属性规定当内容溢出元素框时发生的事情。
1. visible：默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden：内容会被修剪，并且其余内容是不可见的。
3. scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4. auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5. inherit：规定应该从父元素继承overflow属性的值。
*/
.boxTop{
width: 666px;
height: 540px;
border: 1px solid #666;
margin: 10px auto 0;
background: #fff;
overflow: auto;
}
.ATalk,.BSpeak{
width: 97%;
margin-top: 10px;
}
.sendBtn{
width: 60px;
height: 30px;
border: 1px solid hsla(288,100%,50%,0.45);
border-radius: 5px;
background: hsla(190,100%,50%,1.00);
}
.sendBtn:hover{
background: hsla(200,100%,50%,1.00);
}
.BSpeak{
text-align: right;//设置文本内容向右对齐
}
/*
display：属性规定元素应该生成的框的类型。
1. none：此元素不会被显示。
2. block：此元素将显示为块级元素，此元素前后会带有换行符。
3. inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
4. inline-block：行内块元素。
5. list-item：此元素会作为列表显示。
6. run-in：此元素会根据上下文作为块级元素或内联元素显示。
7. table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
8.inline-table：此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
9.table-row-group：此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
10. table-header-group：此元素会作为一个或多个行的分组来显示（类似 <thead>）。
11. table-footer-group：此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
12. table-row：此元素会作为一个表格行显示（类似 <tr>）。
13. table-column-group：此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
14. table-column：此元素会作为一个单元格列显示（类似 <col>）
15. table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
16. table-caption：此元素会作为一个表格标题显示（类似 <caption>）
17. inherit：规定应该从父元素继承display属性的值。
*/
.ATalk.A-head_portrait, .BSpeak .B-head_portrait{
display: inline-block;
width: 43px;
height: 43px;
border-radius: 50%;
line-height: 43px;
text-align: center;
color: white;
}
.ATalk.A-head_portrait{
background-color: deepskyblue;
}
.BSpeak.B-head_portrait{
background-color: orange;
}
.ATalk .AWord, .BSpeak.BWord{
display: inline-block;
max-width: 80%;//设置元素的最小宽度为父元素的百分之八十
background: #006AFF;
border-radius: 13px;
color: #fff;
padding: 5px 10px;
text-align: left;
margin: 5px;
}
.BSpeak .BWord{
background: #FF2C00;
}
.ATalk{
margin: 10px;
}
.BSpeak{
margin: 10px;
text-align: right;
}
.boxBottom{
width: 680px;
margin: 10px auto 0;
}
/*
outline：（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
//轮廓线不会占据空间，也不一定是矩形。简写属性在一个声明中设置所有的轮廓属性。
默认值：invert、none、medium
outline-color：规定边框的颜色。
outline-style：规定边框的样式。
outline-width：规定边框的宽度。
inherit：规定应该从父元素继承 outline 属性的设置。
*/
.whoTalk{
width: 60px;
height: 30px;
float: left;
outline: none;
}
/*
text-indent：属性规定文本块中首行文本的缩进。
//允许使用负值。如果使用负值，那么首行会被缩进到左边。
默认值：not、specified
1. length：定义固定的缩进。默认值：0。
2. %：定义基于父元素宽度的百分比的缩进。
3. inherit：规定应该从父元素继承text-indent属性的值。
*/
.talkInput{
width: 520px;
height: 26px;
float: left;
margin-left: 10px;
outline: none;
text-indent: 10px;
}
.sendBtn{
width: 66px;
height: 30px;
float: left;
margin-left: 10px;
}
3. 在script内写上js代码
// JavaScriptDocument
window.onload =function(){
var XboxTop = document.getElementById("boxTop");
//获取到id为boxTop的元素并命名为XboxTop
var Xwho =document.getElementById("who");
//获取到id为who的元素并命名为Xwho
var xInputTalk =document.getElementById("talkInput");
//获取到id为talkInput的元素并命名为xInputTalk
//回车键实现发送
window.onkeyup = function(event){
//判断当前是否点击了回车键，键盘码：13
if(event.keyCode == 13){
//调用点击事件
document.getElementById("sendBtn").onclick();
}
}
document.getElementById("sendBtn").οnclick= function(){
var Value01 = Xwho.value;//获取到Xwho的值并命名为Value01
var Value02 = xInputTalk.value;//获取到xInputTalk的内容并命名为Value02
var str = "";//声明一个值为空的变量str
if(Value02 == ""){//判断Value02的值是否为空，
alert("请输入文本内容！");//为空则输出“请输入文本内容！”
return;
}
if(Value01 == 0){//判断Value01的值是否为0
str = '<div><spanclass="A-head_portrait">A</span><spanclass="AWord">'+Value02+'</span></div>';//是，则变量str的值为'<div><spanclass="A-head_portrait">A</span><spanclass="AWord">'+Value02+'</span></div>'
}else{
str = '<div><spanclass="BWord">'+Value02+'</span><spanclass="B-head_portrait">B</span></div>';//不是，则变量str的值为'<div><spanclass="BWord">'+Value02+'</span><spanclass="B-head_portrait">B</span></div>'
}
XboxTop.innerHTML = XboxTop.innerHTML +str;//设置XboxTop的开始标签和结束标签之间的HTML为XboxTop的HTML+str的值
//清空输入框
xInputTalk.value = "";
}
}
效果：
1327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
