实现效果：
CORE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Talk Room</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body{
font-family: "microsoft yahei";
background-color: #f7f7f7;
color: #666;
font-size: 13px;
line-height: 1.8em;
}
.roomArea{
width: 400px;
height: 500px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.room-content{
width: 100%;
padding: 10px;
height: 320px;
overflow-y:auto;
border-bottom: 1px solid #f7f7f7;
}
.opArea{
width: 100%;
}
.wordsInput{
width: 380px;
padding: 10px;
height: 80px;
margin-bottom: 20px;
border: 0;
outline: 0;
border-bottom: 1px solid #f7f7f7;
font-family: "microsoft yahei";
}
.btn{
float: right;
margin:0 6px;
padding: 5px 20px;
border: 0;
outline: 0;
border-radius: 3px;
background-color: #eb4f38;
color: #fff;
border: 1px solid transparent;
}
#offBtn{
background-color: #a9b7b7;
}
.inp{
width: 125px;
outline: 0;
height: 25px;
border: 0;
border-bottom: 1px solid #f7f7f7;
}
label{
margin-left: 10px;
}
.msg-list{
position: relative;
}
.msg-list li{
display:inline-block;
padding: 6px 0;
margin: 6px 0;
}
.words {
position: relative;
display: inline-block;
margin-left: 50px;
background-color: #00bb9c;
color: #fff;
padding: 5px 8px;
border-radius: 4px;
width: 240px;
min-height: 40px;
}
.words:before{
content: ‘‘;
position: absolute;
top:7px;
left:-6px;
border-style: solid;
border-width: 6px 12px 6px 0;
border-color: transparent #00bb9c transparent transparent;
}
.nickName {
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #00bb9c;
display: inline-block;
line-height: 40px;
text-align: center;
color: #fff;
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.3);
box-shadow: 0 0 1px rgba(0,0,0,.3);
}
.time {
float: right;
font-size: 12px;
color: #eee;
}
.oRight .nickName {
right: 43px;
background-color: #56abe4;
}
.oRight .words{
background-color: #56abe4;
}
.oRight .words:before{
display: none;
}
.oRight .words:after{
content: ‘‘;
position: absolute;
top:7px;
right:-6px;
border-style: solid;
border-width: 6px 0 6px 12px ;
border-color: transparent transparent transparent #56abe4 ;
}
</style>
</head>
<body>
<div class="roomArea">
<div class="room-content" >
<ul class="msg-list" id="msgList">
</ul>
</div>
<div class="opArea">
<textarea class="wordsInput" id="txtInput" placeholder="说点什么吧"></textarea>
<label for="inp">输入昵称:</label>
<input type="text" class="inp" id="inp">
<button class="btn" id="offBtn">取消</button>
<button class="btn" id="sendBtn">发布</button>
</div>
</div>
<!--js部分-->
<script type="text/javascript">
var oMsgList=document.getElementById(‘msgList‘);
var oTxtInput=document.getElementById(‘txtInput‘);
var oInp=document.getElementById(‘inp‘);
var oOffBtn=document.getElementById(‘offBtn‘);
var oSendBtn=document.getElementById(‘sendBtn‘);
oSendBtn.onclick=function addWords(){
if (oTxtInput.value==‘‘) {
alert(‘输入内容不能为空‘);
oTxtInput.focus();
return false;
}
else if (oInp.value==‘‘) {
alert(‘昵称不能为空‘);
oInp.focus();
return false;
}
else{
oMsgList.innerHTML+="<li>"+"<span class=‘nickName‘>"+oInp.value +"</span>" + "<span class=‘words‘>"+oTxtInput.value+"<span class=‘time‘>"+getTime()+"</span>"+"</span>" +"</li>";
oInp.value=‘‘;
oTxtInput.value=‘‘;
//遍历li
var i="";
var d=document.getElementsByTagName(‘li‘);
//获取tag名为li的html元素
for(i=0;i<d.length;i++){//遍历tag
if (i%2 != 0) {
//偶数添加类"oRight"
d[i].className="oRight";
};
}
}
}
function getTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var time = year+‘/‘+month+‘/‘+day+‘ ‘+hours+‘:‘+minutes+‘:‘+seconds;
return time;
}
</script>
</body>
</html>
时间： 2024-12-05 13:04:59