脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js微信聊天界面

js实现微信聊天界面

 更新时间：2020年08月09日 12:50:49   作者：星辰落海  
这篇文章主要为大家详细介绍了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语句的理解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • iconfont的三种使用方式详解

    iconfont的三种使用方式详解

    这篇文章主要介绍了iconfont的三种使用方式,需要的朋友可以参考下
    2018-08-08
  • json对象与数组以及转换成js对象的简单实现方法

    json对象与数组以及转换成js对象的简单实现方法

    下面小编就为大家带来一篇json对象与数组以及转换成js对象的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 从基础开始建立一个JS代码库

    从基础开始建立一个JS代码库

    从基础开始建立一个JS代码库，更新中 有心人会领技术走的更远
    2009-07-07
  • 详解JS内存空间

    详解JS内存空间

    因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。为了解决大家的疑惑，本文将详细介绍JS内存空间
    2021-06-06
  • IntelliJ IDEA 安装vue开发插件的方法

    IntelliJ IDEA 安装vue开发插件的方法

    本篇文章主要介绍了IntelliJ IDEA 安装vue开发插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript 闭包的使用场景

    JavaScript 闭包的使用场景

    这篇文章主要介绍了JavaScript 闭包的使用场景，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • js中 计算两个日期间的工作日的简单实例

    js中 计算两个日期间的工作日的简单实例

    下面小编就为大家带来一篇js中 计算两个日期间的工作日的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript实现的图片预览和上传功能示例【兼容IE 9】

    javascript实现的图片预览和上传功能示例【兼容IE 9】

    这篇文章主要介绍了javascript实现的图片预览和上传功能,结合实例形式分析了javascrpt图片预览和上传功能相关实现技巧与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JS 实现随机验证码功能

    JS 实现随机验证码功能

    验证码验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能，需要的朋友参考下
    2017-02-02
  • 如何利用JS检查元素是否在视口内

    如何利用JS检查元素是否在视口内

    这篇文章主要给大家介绍了关于如何利用JS检查元素是否在视口内的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04

最新评论