abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿照TIM聊天</title> <style type="text/css"> *{margin: 0px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿照TIM聊天</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.header{width: 950px;height: 30px;border-bottom: 1px solid #ccc;margin-top: 15px;}
.header h2{float: left;font-size: 20px;font-weight: bold;margin-left: 20px;}
.header_ul{float: right;}
.header_ul li{float: left;width: 40px;height: 28px;text-align: center;font-size: 15px;list-style: none;color: #ccc;margin-right: 10px;}
.header_ul li:hover{color: black;border-bottom: 2px solid #4598ff;}
.content{width: 950px;}
.content_show{height: 440px;width: 740px;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;overflow-y:scroll;float: left;}
.content_show .date{text-align: center;color: #aaa;font-size: 13px;margin: 20px auto}
.content_show .icon{width: 40px;height: 40px;border-radius: 20px;background-color: lightblue;float: left;margin: 0px 10px;}
.content_show .callcontent{background: #eeeeee;padding: 10px;overflow:hidden;float: left;border-radius: 8px;}
.call_name{color: #aaa;}
.input{height: 160px;width: 740px;float: left;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.input input{height: 100px;width: 720px;overflow: hidden;border: none;padding: 0px;outline: none;padding: 10px}
.input button{background-color: #0188fb;color: #fff;border: none;padding: 5px 20px;float: right;margin: 5px;}
.content_right{height: 601px;width: 208px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;float: right;}
.content_right .qun{width: 209px;height: 200px;border-bottom: 1px solid #ccc;}
.content_right p{margin: 10px;font-weight: 350;font-size: 20px;}
</style>
</head>
<body>
<div class="header">
<h2>VIP-PHP中文网</h2>
<ul class="header_ul">
<li style="color: black;border-bottom: 2px solid #4598ff;">聊天</li>
<li>公告</li>
<li>文件</li>
<li>应用</li>
</ul>
</div>
<div class="clear"></div>
<div class="content">
<div class="content_show">
</div>
<div class="content_right">
<div class="qun">
<p>群通知</p>
</div>
<div class="chengyuan">
<p>成员</p>
</div>
</div>
<div class="input">
<input type="text" name="info">
<button>发送</button>
</div>
</div>
<script>
let content_show = document.getElementsByClassName('content_show')[0];
let input = document.getElementsByName('info')[0];
let button = document.getElementsByTagName('button')[0];
button.onclick = function(){
//获取当前时间
let now = new Date();
let myDate = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
//创建对象
let div = document.createElement('div');
let divclear = document.createElement('div');
let pDate = document.createElement('p');
let divicon = document.createElement('div');
let pname = document.createElement('p');
let p = document.createElement('p');
//添加class
divclear.setAttribute('class','clear');
pDate.setAttribute('class','date');
divicon.setAttribute('class','icon');
pname.setAttribute('class','call_name');
p.setAttribute('class','callcontent');
//判断内容是否为空
if(input.value === ''){
alert('没有输入内容')
}else{
//添加内容
pDate.innerHTML = myDate;
pname.innerHTML = 'name';
p.innerHTML = input.value;
//添加到div中
div.appendChild(divclear);
div.appendChild(pDate);
div.appendChild(divicon);
div.appendChild(pname);
div.appendChild(p);
content_show.appendChild(div);
//输入框清空
input.value = '';
}
}
</script>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-01-18 09:22:30
Teacher's summary：写的是没有毛病 但是原理一定要搞清楚 搞清楚原理就可以在这个原本的基础上改变很多哦 没事多研究研究