提示
因为要实现两个对话框效果,所以我们这边设置的是自我对话,无聊的同学可以用这个来打发时间,说不定能找到更多灵感(●’◡’●)
JS代码
var oBtn = document.getElementById("btn");
var oMsg = document.getElementById("text");
var oChat = document.querySelector("#chat");
var oDel = document.getElementById("del"); //这里是多出来的删除按钮。不想要的可以不要
oBtn.onclick = function(){
//判断函数的值是否为空,若不为空,则输入框的颜色变为红色
if(oMsg.value == ""){
oMsg.style.border = "1px solid #E84A7E";
}else{
//这里让颜色恢复默认
oMsg.style.border = "1px solid #ccc";
//创建一个新的p标签用来存放输入的内容,判断输入的顺序,这是自我聊天需要的
var content = oChat.appendChild(document.createElement("p"));
if(oChat.children.length%2==1){
//设置内容样式,这里也可以在CSS里面写,用nth-chlid(odd/even)来写
oChat.lastElementChild.style.cssText='float: left;padding: 5px;border-radius: 5px;margin: 0;background:#EAE9E9 ;';
console.log(1234);
}else{
oChat.lastElementChild.style.cssText='float: right;padding: 5px;border-radius: 5px;margin: 0;background:limegreen;';
}
content.innerText = oMsg.value;
oChat.scrollTop = oChat.scrollHeight;
}
oMsg.value = ''; //清除对话框里的内容
}
// 删除信息,不要的可以连这上面的一起删除
oDel.onclick = function(){
oChat.lastElementChild.remove()
}
CSS样式
这边使用的是弹性盒子模型
<style type="text/css">
#box {
border: 1px solid #288BC4;
padding: 10px;
width: 300px;
display: flex;
flex-direction: column;
align-self: flex-end;
position: relative;
}
#chat{
box-sizing: border-box;
width: 100%;
height: 300px;
overflow-y: scroll;
border: 1px dotted #50B9FD;
}
textarea{
height: 50px;
margin: 10px 0;
}
#btn{
float: right;
bottom: 0px;
width: 30%;
}
p{
clear: both;
max-width: 200px;
word-wrap:break-word;
}
</style>
HTML内容
<body>#
<div id="box">
<div id="chat">
</div>
<textarea id="text"></textarea>
<div id="sbtn">
<input type="button" name="" id="btn" value="发送" />
<input type="button" name="" id="del" value="删除" />
</div>
</div>
</body>