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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
Swiper自定义分页器使用详解
2017/12/28 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python机器学习实战之树回归详解
2017/12/20 Python
Django中的用户身份验证示例详解
2019/08/07 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
运动会获奖感言
2014/02/11 职场文书
项目转让协议书
2014/10/27 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
经典爱情感言
2015/08/03 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python