首页问答社区 web技术正文

HTML5如何实现仿手机微信聊天界面

2021-02-22 07:37:45 180 0

这篇文章主要介绍了HTML5如何实现仿手机微信聊天界面，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：

源代码如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>HTML5模拟微信聊天界面</title>
<style>
/**重置标签默认样式*/
*{
margin:0;
padding:0;
list-style:none;
font-family:'微软雅黑'
}
#container{
width:450px;
height:780px;
background:#eee;
margin:80pxauto0;
position:relative;
box-shadow:20px20px55px#777;
}
.header{
background:#000;
height:40px;
color:#fff;
line-height:34px;
font-size:20px;
padding:010px;
}
.footer{
width:430px;
height:50px;
background:#666;
position:absolute;
bottom:0;
padding:10px;
}
.footerinput{
width:275px;
height:45px;
outline:none;
font-size:20px;
text-indent:10px;
position:absolute;
border-radius:6px;
right:80px;
}
.footerspan{
display:inline-block;
width:62px;
height:48px;
background:#ccc;
font-weight:900;
line-height:45px;
cursor:pointer;
text-align:center;
position:absolute;
right:10px;
border-radius:6px;
}
.footerspan:hover{
color:#fff;
background:#999;
}
#user_face_icon{
display:inline-block;
background:red;
width:60px;
height:60px;
border-radius:30px;
position:absolute;
bottom:6px;
left:14px;
cursor:pointer;
overflow:hidden;
}
img{
width:60px;
height:60px;
}
.content{
font-size:20px;
width:435px;
height:662px;
overflow:auto;
padding:5px;
}
.contentli{
margin-top:10px;
padding-left:10px;
width:412px;
display:block;
clear:both;
overflow:hidden;
}
.contentliimg{
float:left;
}
.contentlispan{
background:#7cfc00;
padding:10px;
border-radius:10px;
float:left;
margin:6px10px010px;
max-width:310px;
border:1pxsolid#ccc;
box-shadow:003px#ccc;
}
.contentliimg.imgleft{
float:left;
}
.contentliimg.imgright{
float:right;
}
.contentlispan.spanleft{
float:left;
background:#fff;
}
.contentlispan.spanright{
float:right;
background:#7cfc00;
}
</style>
<script>
window.onload=function(){
vararrIcon=['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
varnum=0;//控制头像改变
variNow=-1;//用来累加改变左右浮动
varicon=document.getElementById('user_face_icon').getElementsByTagName('img');
varbtn=document.getElementById('btn');
vartext=document.getElementById('text');
varcontent=document.getElementsByTagName('ul')[0];
varimg=content.getElementsByTagName('img');
varspan=content.getElementsByTagName('span');

icon[0].onclick=function(){
if(num==0){
this.src=arrIcon[1];
num=1;
}elseif(num==1){
this.src=arrIcon[0];
num=0;
}
}
btn.onclick=function(){
if(text.value==''){
alert('不能发送空消息');
}else{
content.innerHTML+='<li><imgsrc="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
iNow++;
if(num==0){
img[iNow].className+='imgright';
span[iNow].className+='spanright';
}else{
img[iNow].className+='imgleft';
span[iNow].className+='spanleft';
}
text.value='';
//内容过多时,将滚动条放置到最底端
contentcontent.scrollTop=content.scrollHeight;
}
}
}
</script>
</head>
<body>
<pid="container">
<pclass="header">
<spanstyle="float:left;">业余草:模拟微信聊天界面</span>
<spanstyle="float:right;">14:21</span>
</p>
<ulclass="content">
<!--欢迎加入qq群：454796847、135430763-->
</ul>
<pclass="footer">
<pid="user_face_icon">
<imgsrc="http://www.xttblog.com/icons/favicon.ico"alt="">
</p>
<inputid="text"type="text"placeholder="说点什么吧...">
<spanid="btn">发送</span>
</p>
</p>
</body>
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5如何实现仿手机微信聊天界面”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!

html5