js+html+css实现简单的聊天功能

Original 2019-03-01 09:46:50 290
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} div{ height:&n
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
div{
height: 300px;
width: 200px;
background:#ccc;
text-align: center;
margin-left: 50px;
}
.content{
list-style: none;
width: 160px;
margin: 10px auto;
height: 200px;
color:#fff;
font-size:14px;
background: lightgreen;
}
.content li{
text-align: left;
margin:10px;
}
.text{
margin: 10px 0;
width: 160px;
height: 30px;
}
.submit{
width: 162px;
margin: 0px auto;
border:none;
background:lightblue;
color:#fff;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<ul></ul>
<textarea></textarea><br>
<button>发表</button>
</div>
</body>
<script type="text/javascript">
let content = document.querySelector('.content');
let text = document.querySelector('.text');
let submit = document.querySelector('.submit');

submit.onclick = function(){
let value = text.value;
let li = document.createElement("li");
li.innerHTML="游客:"+value;
content.appendChild(li);
let li1 = document.createElement("li");
li1.style.color="red";
li1.innerHTML = "客服1:您好,很高兴为您服务!";
content.appendChild(li1);
}

</script>
</html>

执行代码如下显示:

QQ截图20190301094413.jpg

Correcting teacher:查无此人Correction time:2019-03-01 09:49:36
Teacher's summary:完成的不错,就是样式不好看,做项目要多要求自己,继续加油

Release Notes

Popular Entries