js实现微信聊天界面


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了js实现微信聊天界面的具体代码,供大家参考,具体内容如下

效果如图:

js实现微信聊天界面

js实现微信聊天界面

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟微信聊天</title>
  <link rel="stylesheet" href="../css/模拟微信聊天.css" rel="external nofollow" >
</head>
<body>
  <div class="box">
    <div class="phone">
      <div class="header"></div>
      <div class="content">
        <ul class="list">
        </ul>
        <div class="content-bottom">
          <img src="../image/one.jpeg" width="45px" height="45px" id="pic">
          <input type="text" placeholder="请输入聊天内容" class="myInput">
          <input type="button" value="发送" class="out">
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</body>
<script src="../js/模拟微信聊天.js"></script>
</html>
*{
  margin:0;
  padding:0;
}
body{
  margin:0;
  padding:0;
}
.box{
  margin:100px auto;
  height:900px;
  width:1200px;
  background:linear-gradient(to right,violet,pink);
}
.phone{
  top:50px;
  position:relative;
  width:500px;
  height:800px;
  background:#f6f6f6;
  left:50%;
  margin-left:-250px;
  border-radius: 30px;
}
.phone .header{
  position: absolute;
  width:135px;
  height:5px;
  background:rgba(0,0,0,0.8);
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  border-radius: 80px;
  left:50%;
  margin-left:-67.5px;
  top:40px;
}
.phone .content{
  position: absolute;
  top:75px;
  width:460px;
  height: 640px;
  background: #fff;
  left:50%;
  margin-left:-230px;
  border-radius: 1px;
  border:2px solid gray;
}
.phone .footer{
  position: absolute;
  width:50px;
  height:50px;
  background:pink;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  bottom:15px;
  left:50%;
  margin-left:-25px;
}
.content .list{
  height:575px;
  list-style-type: none;
  overflow: hidden;
}
.list li{
  margin-top:30px;
}
.content .list .left img{
  display:inline-block;
  margin: 0;
  float: left;
  margin-left:15px;
}
.content .list .left p{
  color:#333333;
  margin-left:78px;
  width:320px;
  padding:20px 10px;
  font-size:20px;
  background:pink;
  border-radius: 6px;
  text-align: left;
}
.content .list .right img{
  display:inline-block;
  margin: 0;
  float:right;
  margin-right:15px;
}
.content .list .right p {
  text-align: right;
  color: #333333;
  margin-left: 37px;
  width: 320px;
  padding: 20px 10px;
  font-size: 20px;
  background: pink;
  border-radius: 6px;
}
 .content-bottom{
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 65px;
  background:rgba(0,0,0,0.2);
  padding:10px 30px;
  position: relative;
}
.content-bottom .myInput{
  display: inline-block;
  height:30px;
  width:250px;
  font-size:20px;
  border-radius:5px;
  border:1px solid #999999;
  text-indent:10px;
  outline:none;
  position:absolute;
  top:50%;
  margin-top: -15px;
  margin-left:20px;
}
.content-bottom .out{
  height:32px;
  width: 60px;
  display: inline-block;
  position: absolute;
  right:30px;
  top:50%;
  border:1px solid #999999;
  margin-top: -16px;
  font-size:17px;
  outline: none;
  background:none;
  cursor:pointer;
}
.content-bottom .out:hover{
  background-color: pink;
}
var out = document.querySelector(".out");//获取发送按钮
var myInput = document.querySelector(".myInput");
var pic = document.getElementById("pic");//获取图片
var onOff = true;
var list = document.querySelector(".list");//获取ul
pic.onclick=function(){
  if(onOff){
    pic.src = "../image/two.jpeg";
    onOff = false;
  }else {
    pic.src = "../image/one.jpeg";
    onOff = true;
  }
};
out.onclick=function () {
  var value = myInput.value;//获取文字内容
  if(value == ""){
    alert("请输入内容");
  }else{
    if(onOff){
      list.innerHTML += "<li class='left'><img src='../image/one.jpeg'/><p>" +value+ "</p></li>";
    }else{
      list.innerHTML += "<li class='right'><img src='../image/two.jpeg'/><p>" +value+ "</p></li>";
    }
  }
  myInput.blur(myInput.value='');//失去焦点,文本框清空
};

学习收获:加深对if语句的理解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现文本框中焦点在最后位置
Mar 04 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
js实现微信聊天效果
Aug 09 #Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
js仿京东放大镜效果
Aug 09 #Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 #Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
You might like
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
node.js环境搭建图文详解
2018/09/19 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
校长寄语大全
2014/04/09 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
校外活动方案
2014/08/28 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书