基于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之HTMLCollection接口代码
Apr 27 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
vue+element ui实现锚点定位
Jun 29 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
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
python进阶教程之循环对象
2014/08/30 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python爬取网易云音乐评论
2018/11/16 Python
python实现汽车管理系统
2018/11/30 Python
Python中的元组介绍
2019/01/28 Python
python的re模块使用方法详解
2019/07/26 Python
python word转pdf代码实例
2019/08/16 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
临床医学应届生求职信
2013/11/06 职场文书
给校长的建议书100字
2014/05/16 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js