基于javascript制作微信聊天面板


Posted in Javascript onAugust 09, 2020

本文实例分享了javascript制作微信聊天面板的相关代码,具体内容如下

先上图吧

基于javascript制作微信聊天面板

点击头像更换说话对象,简单说下实现原理,html中创建一个ul用于存放所有说话的内容,对话内容是有javascript 动态生成,

主要难点:先布局好css,当时奥巴马发送时候,让这个li有浮动,当是小胖时候,让这个li左浮动。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>模拟短信发送</title>
 <style>
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: '微软雅黑'
 }
 #container {
  width: 450px;
  height: 780px;
  background: #eee;
  margin: 80px auto 0;
  position: relative;
  box-shadow: 20px 20px 55px #777;
 }
 .header {
  background: #000;
  height: 34px;
  color: #fff;
  line-height: 34px;
  font-size: 20px;
  padding: 0 10px;
 }
 .footer {
  width: 430px;
  height: 50px;
  background: #666;
  position: absolute;
  bottom: 0;
  padding: 10px;
 }
 .footer input {
  width: 275px;
  height: 45px;
  outline: none;
  font-size: 20px;
  text-indent: 10px;
  position: absolute;
  border-radius: 6px;
  right: 80px;
 }
 .footer span {
  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;
 }
 .footer span:hover {
  color: #fff;
  background: #999;
 }
 #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;
 }
 .content li {
  margin-top: 10px;
  padding-left: 10px;
  width: 412px;
  display: block;
  clear: both;
  overflow: hidden;
 }
 .content li img {
  float: left;
 }
 .content li span{
  background: #7cfc00;
  padding: 10px;
  border-radius: 10px;
  float: left;
  margin: 6px 10px 0 10px;
  max-width: 310px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px #ccc;
 }
 .content li img.imgleft { 
  float: left; 
 }
 .content li img.imgright { 
  float: right; 
 }
 .content li span.spanleft { 
  float: left;
  background: #fff;
 }
 .content li span.spanright { 
  float: right;
  background: #7cfc00;
 }
 </style>
 <script>
 window.onload = function(){
  var arrIcon = ['img/1.jpg','img/2.jpg'];
  var num = 0; //控制头像改变
  var iNow = -1; //用来累加改变左右浮动
  var icon = document.getElementById('icon').getElementsByTagName('img');
  var btn = document.getElementById('btn');
  var text = document.getElementById('text');
  var content = document.getElementsByTagName('ul')[0];
  var img = content.getElementsByTagName('img');
  var span = content.getElementsByTagName('span');

  icon[0].onclick = function(){
  if(num==0){
   this.src = arrIcon[1];
   num = 1;
  }else if(num==1){
   this.src = arrIcon[0];
   num = 0;
  }  
  }
  btn.onclick = function(){
  if(text.value ==''){
   alert('发送内容不能为空');
  }else {
   content.innerHTML += '<li><img src="'+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 = '';
  }
  }
 }
 </script>
</head>
<body>
 <div id="container">
 <div class="header">
  <span style="float: left;">白超华-博客园</span>
  <span style="float: right;">20:30</span>
 </div>
 <ul class="content"></ul>
 <div class="footer">
  <div id="icon">
  <img src="img/1.jpg" alt="">
  </div>
  <input id="text" type="text" placeholder="说点什么吧...">
  <span id="btn">发送</span>
 </div>
 </div>
</body>
</html>

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript与webservice的通信实现代码
Dec 25 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 #Javascript
TypeScript Type Innference(类型判断)
Mar 10 #Javascript
JavaScript File分段上传
Mar 10 #Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
ES6的新特性概览
Mar 10 #Javascript
JavaScript字符串常用的方法
Mar 10 #Javascript
javascript中call apply 与 bind方法详解
Mar 10 #Javascript
You might like
网络资源
2006/10/09 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
招商引资工作汇报
2014/10/28 职场文书
党员自评材料范文
2014/12/17 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
世界十大狙击步枪排行榜
2022/03/20 杂记
详解Python内置模块Collections
2022/03/22 Python