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 相关文章推荐
IE下使用cloneNode注意事项分享
Nov 22 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JavaScript对象学习小结
Sep 02 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 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获取金书网的书名的实现代码
2010/06/11 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
tagName的使用,留一笔
2006/06/26 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python面试题小结附答案实例代码
2019/04/11 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
客户代表自我评价范例
2013/09/24 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang