网页聊天
示例图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script type="text/javascript">
//
window.onload = function(){
var Words = document.getelementbyid("words");
var Who = document.getElementById("who");
var TalkWords = document.getElementById("talkwords");
var TalkSub = document.getElementById("talksub");
TalkSub.onclick = function(){
//定义空字符串
var str = "";
if(TalkWords.value == ""){
// 消息为空时弹窗
alert("消息不能为空");
return;
}
if(Who.value == 0){
//如果Who.value为0n那么是 A说
str = '<p class="atalk"><span>A说 :' + TalkWords.value +'</span></p>';
}
else{
str = '<p class="btalk"><span>B说 :' + TalkWords.value +'</span></p>' ;
}
Words.innerHTML = Words.innerHTML + str;
}
}
</script>
</head>
<body>
<p class="talk_con">
<p class="talk_show" id="words">
<p class="atalk"><span id="asay">A说：吃饭了吗？</span></p>
<p class="btalk"><span id="bsay">B说：还没呢，你呢？</span></p>
</p>
<p class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</p>
</p>
</body>
</html>
相关阅读
DIV界面布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Div布局</title> </head> <body> <!-整个p布局大
clientWidth:width+padding2;offsetWidth:width+padding2+border*2<p class="box">我是box</p> <style> *{
计算节点的实现模型构建了各种类型的二层网络。属于同一个二层网络的VM可以进行二层通信。如果一个VM想访问二层网络之外的世界怎
目录 1.1 环境安装 1.1.1 windows下的安装 1.1.2 linux环境下的安装 1.2 hello world 1.1 环境安装 webkit是开源项目，项
背景： 对接第三方接口需要传个age和ageTyoe字段，其中age字段为integer型，ageType取“岁/月/天”，但是我们系统存的年龄格式为N岁M月，