基于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中封装window.open解决不兼容问题
Sep 28 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
php修改时间格式的代码
2011/05/29 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
微信小程序实现点赞业务
2021/02/10 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python实现简易通讯录修改版
2018/03/13 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
中国梦口号
2014/06/13 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python