简单的聊天对话（代码全）

废话不多说，上代码

html：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>聊天界面</title><link rel="stylesheet" type="text/css" href="css/chat.css" /><script src="js/jquery-1.10.2.js"></script><script src="js/flexible.js"></script></head><body><header class="header"><a class="back" href="javascript:history.back()"></a><h5 class="tit">追星星的人</h5><div class="right">资料</div></header><div class="message"><div class="send"><div class="time">05/22 06:30</div><div class="msg"><img src="data:images/touxiang.png" alt="" /><p><i class="msg_input"></i>你好在不在呀，妹子！</p></div></div><div class="show"><div class="time">05/22 06:30</div><div class="msg"><img src="data:images/touxiangm.png" alt="" /><p><i clas="msg_input"></i>你好你好你好</p></div></div></div><div class="footer"><img src="data:images/hua.png" alt="" /><img src="data:images/xiaolian.png" alt="" /><input type="text" /><p>发送</p></div><script src="js/chat.js" type="text/javascript" charset="utf-8"></script></body></html>

css：

h5{margin: 0;
}
img{max-width: 100%;vertical-align: middle
}
input{outline: none;
}
body{max-width: 720px;margin: 0 auto;background: #f1f1f1;color:#333;font-size: 0.26rem;
}
.header{border-bottom: 1px solid #dfdfdf;padding:0 0.2rem;height: 1rem;line-height: 1rem;background: #fff;position: fixed;width: 100%;max-width: 720px;box-sizing: border-box;z-index: 100;
}
.back{position: absolute;  top: 0;left: 0.3rem;background:url("../images/left.png") no-repeat;width: 0.2rem;height:0.4rem;margin-top: 0.34rem;background-size: 0.2rem 0.4rem;
}
.header .tit{font-size: 0.32rem;vertical-align: middle;text-align: center;height: 1rem;line-height: 1rem;font-weight: normal;
}
.header .right{position: absolute;right: 0.3rem;top: 0;float: none;font-size: 0.24rem;line-height: 1.2rem;
}
.message{background-color: #f1f1f1;padding: 1.2rem 0.3rem 1rem 0.3rem;
}
.time{font-size:0.24rem;color:#999;margin-bottom: 0.3rem;text-align: center;
}.footer{position: fixed;bottom: 0;height:1rem;background-color:#fff;line-height:1rem;width: 100%;max-width: 720px;border-top: 1px solid #ddd;
}
.footer img{margin-left:0.2rem;width: 0.5rem;
}.footer input{margin-left:0.2rem;width:3.5rem;height:0.64rem;border-radius: 0.1rem;border:0.01rem solid #ddd;padding : 0 0.15rem;}
.footer p{width:1.2rem;height:0.68rem;font-size:0.3rem;color:#fff;line-height:0.68rem;text-align:center;background-color:#ddd;border-radius: 0.1rem;float:right;margin-top:0.2rem;margin-right:0.2rem;
}
.send:after,.show:after,.msg:after{content: "";clear: both;display: table;
}.msg>img{width: 0.8rem;float: left;
}
.msg>p{float: left;margin:0  0.4rem;padding: 0.25rem;background: #fff;font-size: 0.3rem;position: relative;border-radius: 0.2rem;max-width:5rem ;box-sizing: border-box;
}.msg_input{position: absolute;background: url("../images/msg-input.png") no-repeat;background-size: 0.31rem auto;width: 0.31rem;height: 0.51rem;left: -0.31rem;top: 0.25rem;
}
.show .msg img,.show .msg p,.show .msg{float: right;
}.show .msg_input{left: auto;right: -0.11rem;transform:rotate(180deg);-ms-transform:rotate(180deg);     /* IE 9 */-moz-transform:rotate(180deg);    /* Firefox */-webkit-transform:rotate(180deg); /* Safari 和 Chrome */-o-transform:rotate(180deg);    /* Opera */
}
.send,.show{padding-bottom: 0.3rem;
}
.alert_novip,.flower_num,.give_flower{display: none;padding: 0.3rem 0.5rem;font-size: 0.28rem;
}
.alert_novip p,.flower_num  p{margin-bottom: 0.45rem;.layui-layer-wrap button{font-size: 0.28rem;padding: 0.2rem 0.3rem;margin-top: 0.1rem;background: #f8f8f8;border-radius: 10px;
}
}
.flower_num button{padding: 0.2rem 0.5rem;border-radius: 10px;
}
.layui-layer-wrap button:first-child{float: left;
}
.layui-layer-wrap button:last-child{float: right;background: #FF7171;color: #fff;
}
.alert_novip button{padding: 0.2rem 0.3rem;border-radius: 10px
}
.flower{width: 0.8rem;margin: 0 auto;
}
.give_flower{text-align: center;
}
.give_flower p{text-align: center;line-height: 1.5;
}
.give_flower input{width: 1rem;margin-right: 0.1rem;margin-top: 0.2rem;
}
.give_flower button{display: block;width: 3rem;font-size: 0.28rem;margin: 0 auto;margin-top: 0.6rem;float: none!important;line-height: 0.65rem;border-radius: 10px;
}

chat.js：

/*发送消息*/
function send(headSrc,str){var html="<div class='send'><div class='msg'><img src="+headSrc+" />"+"<p><i class='msg_input'></i>"+str+"</p></div></div>";upView(html);
}
/*接受消息*/
function show(headSrc,str){var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+"<p><i class='msg_input'></i>"+str+"</p></div></div>";upView(html);
}
/*更新视图*/
function upView(html){$('.message').append(html);$('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)
}
function sj(){return parseInt(Math.random()*10)
}
$(function(){$('.footer').on('keyup','input',function(){if($(this).val().length>0){$(this).next().css('background','#114F8E').prop('disabled',true);}else{$(this).next().css('background','#ddd').prop('disabled',false);}})$('.footer p').click(function(){show("./images/touxiangm.png",$(this).prev().val());test();})
})/*测试数据*/
var arr=['我是小Q','好久没联系了！','你在想我么','怎么不和我说话','跟我聊会天吧'];
var imgarr=['images/touxiang.png','images/touxiangm.png']
test()
function test(){$(arr).each(function(i){setTimeout(function(){send("images/touxiang.png",arr[i])},sj()*500)})
}

flexible.js

  (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=720){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

jquery-1.10.2.js:

/*-防止各大cdn公共库加载地址失效问题，此地址我们会时时监控，及调整以保障正常访问*/
/*当前为百度cdn公共库提供的jQuery-1.10.2*/
document.write("<script src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'><\/script>");

图片：

简单的聊天对话（代码全）相关推荐

【网络通信】Java实现简单的聊天对话
目录第一版实现效果: 第二版:增加心跳功能结尾有借鉴视频内容,不知名博主讲的很不错便于理解. 第一版实现效果: Server端: public class Server {public sta ...
简单的小程序聊天对话窗口界面
一个简单的微信小程序聊天对话窗口界面,包括发送文本功能直接上代码,js代码: // 简单版 Page({data: {content: '',// 当前登录者信息login: {id: '2023' ...
SpringBoot入门建站全系列（二十七）WebSocket做简单的聊天室
SpringBoot入门建站全系列(二十七)WebSocket做简单的聊天室一.概述 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 ...
CV之IS：利用pixellib库基于deeplabv3_xception模型对《庆余年》片段实现语义分割/图像分割简单代码全实现
CV之IS:利用pixellib库基于deeplabv3_xception模型对<庆余年>片段实现语义分割/图像分割简单代码全实现目录利用pixellib库基于deeplabv3_xc ...
CV之IS：利用pixellib库基于mask_rcnn_coco模型对《庆余年》片段实现实例分割简单代码全实现
CV之IS:利用pixellib库基于mask_rcnn_coco模型对<庆余年>片段实现实例分割简单代码全实现目录利用pixellib库的instance_segmentation函 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
Python求解一元二次方程问题【简单易懂，注释超全，代码可以直接运行】
Python求解一元二次方程问题[简单易懂,注释超全,代码可以直接运行] 业务需求: 解一元二次方程是初中数学中的基本知识,- -般来讲解法有公式法.因式分解法等.可以根据自己的理解,写- -段求解 ...
python聊天室详细教程_python简单实现聊天室功能（代码教程）
聊天室程序需求: 我们要实现的是简单的聊天室的例子,就是允许多个人同时一起聊天,每个人发送的消息所有人都能接收到,类似于 QQ 群的功能,而不是点对点的 QQ 好友之间的聊天.如下图: 这里我们首先要 ...
C#编写简单的聊天程序
原文:http://www.tracefact.net/CSharp-Programming/Simple-Chat.aspx 引言这是一篇基于Socket进行网络编程的入门文章,我对于网络编程的学 ...

简单的聊天对话（代码全）

简单的聊天对话（代码全）相关推荐

最新文章

热门文章