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 option location 页面跳转实现代码
Dec 27 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
JS实现炫酷轮播图
Nov 15 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
sae使用smarty模板的方法
2013/12/17 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php post换行的方法
2020/02/03 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
Python实现购物车功能的方法分析
2017/11/10 Python
Python 通配符删除文件的实例
2018/04/24 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
pygame实现五子棋游戏
2019/10/29 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
什么是会话Bean
2015/05/14 面试题
传播学毕业生求职信
2013/10/11 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
班级年度安全计划书
2014/05/01 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014年保管员工作总结
2014/11/18 职场文书
python 提取html文本的方法
2021/05/20 Python
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python