参考手机端微信聊天对话框,模拟微信聊天对话框

最新推荐文章于 2024-06-19 09:41:38 发布

达达学前端

最新推荐文章于 2024-06-19 09:41:38 发布

阅读量951

点赞数 2

分类专栏： js 文章标签：微信 html css

本文链接：https://blog.csdn.net/m0_55965566/article/details/120968949

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟微信聊天</title>
    <link rel="stylesheet" href="css/home.css">
</head>
<body>
    <div id="all" >
         <!-- 小哥哥的微信 -->
        <div class="boy">
            <div class="head">帅哥小哥哥</div>
            <div class="txt" id="boy_txt"></div>
            <!-- 下面的div用发来添加发布的消息的 -->
            <div class="ask">
                <input type="text" id="b_ask">
                <a href="##" id="b_btn">发送</a>
            </div>
        </div>
        <!-- 小姐姐的微信 -->
        <div class="girl">
            <div class="head">美女小姐姐</div>
            <div class="txt" id="girl_txt"></div>
            <div class="ask">
                <input type="text" id="g_ask">
                <a href="##" id="g_btn">发送</a>
            </div>
  
        </div>
    </div>
    <!-- 导入外部脚本 -->
    <script src="js/home.js"></script>
</body>
</html>

// 获取需要的标签元素
var oBoyTxt = document.getElementById("boy_txt");//小哥哥的展示区域
var oBask = document.getElementById("b_ask");//小哥哥的输入文本框
var oBbtn = document.getElementById("b_btn");//小哥哥的发送按钮
var oGirlTxt = document.getElementById("girl_txt");//小姐姐的展示区域
var oGask = document.getElementById("g_ask");//小姐姐的输入文本框
var oGbtn = document.getElementById("g_btn");//小姐姐的发送按钮
// 当点击小哥哥的发送按钮时，将信息添加到内容展示框区域
//添加小哥哥的点击事件和执行函数
oBbtn.onclick = function(){
    // alert(1);
    // 获取小哥哥输入文本框的内容,添加到小哥哥的内容区域，并且显示在右边
    // alert(oBask.value)
    oBoyTxt.innerHTML += "<div class='box'><p class='ask_text1'>" + "<span class='ask_span1'>"+oBask.value+"</span>"+"</p><img src='img/4.jpeg' class='header1'/></div>";
    
    oGirlTxt.innerHTML += "<div class='box'><img src='img/4.jpeg' class='header2'/><p class='ask_text2'>" + "<span class='ask_span2'>"+oBask.value+"</span>"+"</p></div>";

    oBask.value ="";
}
//添加小姐姐的点击事件和执行函数
oGbtn.onclick = function(){
      // 获取小姐姐输入文本框的内容,添加到小姐姐的内容区域，并且显示在右边
    // alert(oBask.value)
    oGirlTxt.innerHTML += "<div class='box'><p class='ask_text1'>" + "<span class='ask_span1'>"+oGask.value+"</span>"+"</p><img src='img/3.jpeg' class='header1'/></div>";
    
    oBoyTxt.innerHTML  += "<div class='box'><img src='img/3.jpeg' class='header2'/><p class='ask_text2'>" + "<span class='ask_span2'>"+oGask.value+"</span>"+"</p></div>";

    oGask.value ="";
}

达达学前端

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
参考手机端微信聊天对话框,模拟微信聊天对话框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟.
复制链接

扫一扫