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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
javascript this用法小结
Dec 19 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
javascript填充默认头像方法
Feb 22 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
Vue插件之滑动验证码用法详解
Apr 05 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的数据类型
2018/10/24 PHP
event.srcElement+表格应用
2006/08/29 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
Python 深入理解yield
2008/09/06 Python
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python常用的爬虫技巧总结
2016/03/28 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python Flask基础教程示例代码
2018/02/07 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
聚美优品陈欧广告词
2014/03/14 职场文书
2014年法院工作总结
2014/11/24 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript