简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 聊天界面和选项卡
Blogger Information
Blog 36
fans 0
comment 1
visits 28090
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
聊天界面和选项卡
其琛的博客
Original
726 people have browsed it

聊天效果图DVY1O3GO72]@M[3UD]O@Y[F.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信聊天</title>
<style type="text/css">
.box{
width: 1070px;
height:740px; 
margin: auto;
overflow: hidden;
}
.box .one{
float: left;

}
.box .two{
float: left;
}
.box .three{
float: left;

}
.box .three .main{
width: 677px;
height: 480px;
background-color: #f5f5f5;
margin-top: -19px;
}
.box .three .main ul{
height: 100%;
list-style-type: none;
overflow-y:auto;
overflow-x: none
}
/*.box .three .main ul li{
background-color: #98E125;
}*/
.box .three .bottom{
border:1px solid #fff;
}
.box .three .bottom img{
line-height: 1px;
margin:0;
margin-left: -5px;

}
.box .three .bottom table{
margin: 0;
width: 675px;
height: 120px;
}
textarea{
width: 580px;
height: 100%;
resize: none;
border:none;
}
button{
display: block;
width: 82px;
height: 30px;
background-color: white;
border:1px solid #f5f5f5;
margin-bottom: -40px;
}
button:hover{
background-color: #2ba245;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div>
<img src="images/1.jpg">
</div>
<div>
<img src="images/2.png">
</div>
<div>
<div>
<img src="images/3.png">
</div>
<div>
<ul>
<li></li>
</ul>
</div>
<div>
<img src="images/4.png">
<table>
<tr>
<td>
<textarea cols="50" rows="4" name="text"></textarea>
</td>
<td><button>发送(s)</button></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var anniu=document.getElementsByTagName('button')[0]
var text=document.getElementsByName('text')[0]
var list=document.getElementsByTagName('ul')[0]
// var sum=0
    anniu.onclick=function () {
     if (text.value.length==0) {
     alert('发送内容不能为空')
     return false
     }

     var user= text.value
     text.value=''
     var li=document.createElement('li')
     // li.innerHTML=user
     var userpic = '<img src="images/5.png" width="30">'
     li.innerHTML=userpic+'<span style="background-color: #98E125;">'+user+'</span>'
     list.appendChild(li)
     // sum += 1
     setTimeout(function(){
     var info =['说话注意点，要不用钱砸死你~','说点好话，支付宝给你转账哦','好了，不聊了，我忙着会见各国总统呢','客服小马为你服务~','我可不是每天都接待的~']
     var temp=info[Math.floor(Math.random()*5)]
            var reply =document.createElement('li')
            var kefu = '<img src="images/6.png" width="30">'
            reply.innerHTML = kefu + '<span style="color:black;background-color: white">'+temp+'</span>'
     // reply.innerHTML=kefu+'你好，客服马云为你服务~'
     list.appendChild(reply)
     // sum += 1

     },1000)
   
  //    if (sum > 10) {
//  list.innerHTML = ''
//  sum = 0
// }

    }
</script>

</body>
</html>

手写如图qq_pic_merged_1522645215367.jpg

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！