基于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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
关于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
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
浅谈python中的占位符
2017/11/09 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
do you have any Best Practice for testing
2016/06/04 面试题
ajax是什么及其工作原理
2012/02/08 面试题
软件工程专业推荐信
2013/10/28 职场文书
党员查摆剖析材料
2014/10/10 职场文书
党员倡议书
2015/01/19 职场文书
2015年超市工作总结
2015/04/09 职场文书
焦裕禄观后感
2015/06/03 职场文书
致运动员赞词
2015/07/22 职场文书
2015年除四害工作总结
2015/07/23 职场文书
Django与数据库交互的实现
2021/06/03 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电
python标准库ElementTree处理xml
2022/05/20 Python