JavaScript 模拟手机发消息案例

Follow_浩弟

已于 2023-08-21 19:35:26 修改

阅读量101

点赞数

文章标签： javascript 前端开发语言

于 2023-08-21 19:34:24 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132415136

版权

该篇文章介绍了如何使用HTML、CSS和JavaScript实现一个动态的效果图，包括内容区域的左右切换以及发送按钮触发的文字添加功能。通过JavaScript操作DOM，实现在用户输入和点击事件中改变内容布局。

摘要由CSDN通过智能技术生成

效果图

聊天演示.gif

案例材料

案例实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            width: 285px;
            height: 591px;
            background-image: url(img/phone.jpg);
            background-repeat: no-repeat;
            margin: 100px auto;
            position: relative;
        }
        
        .box .content {
            width: 237px;
            height: 385px;
            position: absolute;
            top: 85px;
            left: 24px;
            overflow: auto;
            background-color: #ECEAF1;
        }
        
        .box .content .right,
        .box .content .left {
            width: 100%;
            height: 28px;
        }
        
        .box .content .left img {
            float: left;
        }
        
        .box .content .right img {
            float: right;
        }
        
        .box .content .right p,
        .box .content .left p {
            width: 164px;
            float: left;
            margin-top: 3px;
            background-color: pink;
        }
        
        .box .content .right p {
            float: right;
            text-align: right;
        }
        
        .box .enter {
            width: 237px;
            height: 35px;
            background-color: #EBF8F6;
            position: absolute;
            bottom: 86px;
            left: 24px;
        }
        
        .box .enter .pic {
            float: left;
            margin-top: 4px;
        }
        
        .box .enter .con {
            width: 150px;
            height: 23px;
            margin: 5px 0px 0px 10px;
            outline: none;
        }
        
        .box .enter .send {
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <!-- <div class="left">
                <img src="img/1.png" alt="">
                <p>你好</p>
            </div>
            <div class="right">
                <img src="img/1.png" alt="">
                <p>你好</p>
            </div> -->
        </div>
        <div class="enter">
            <img src="img/2.png" alt="" class="pic">
            <input type="text" class="con">
            <button class="send">发送</button>
        </div>
    </div>
    <script>
        // 获取节点
        var elecontent = document.getElementsByClassName("content")[0];
        var elecon = document.getElementsByClassName("con")[0];
        var elepic = document.getElementsByClassName("pic")[0];
        var elesend = document.getElementsByClassName("send")[0];

        elesend.onclick = function() {

            if (elecon.value == "") {
                alert("您没有输入文字")
            } else {
                if (fas == 1) {
                    // 第一种写法
                    var eleleft = document.createElement("div");
                    var eleimg = document.createElement("img");
                    var elep = document.createElement("p");
                    elep.innerText = elecon.value
                    eleleft.className = "left";
                    eleimg.src = "img/2.png"
                    elecontent.appendChild(eleleft)
                    eleleft.appendChild(eleimg)
                    eleleft.appendChild(elep)

                    // 可以利用innerHTML识别标签的特性写第二种写法
                    elecontent.innerHTML += "<div class='right'> <img src = 'img/2.png' alt =''> <p>" + elecon.value + "</p> </div>";


                    // 第三种写法(模板字符串)
                    elecontent.innerHTML +=
                        `<div class="left"> 
                        <img src = "img/1.png" alt ="">
                         <p>${elecon.value}</p>
                         </div>`;
                } else {
                    // 第一种写法
                    var eleleft = document.createElement("div");
                    var eleimg = document.createElement("img");
                    var elep = document.createElement("p");
                    elep.innerText = elecon.value
                    eleleft.className = "right";
                    eleimg.src = "img/1.png"
                    elecontent.appendChild(eleleft)
                    eleleft.appendChild(elep)
                    eleleft.insertBefore(eleimg, elep)

                    // 可以利用innerHTML识别标签的特性写第二种写法
                    elecontent.innerHTML += "<div class='left'> <img src = 'img/1.png' alt =''> <p>" + elecon.value + "</p></div>";

                    // 第三种写法(模板字符串)
                    elecontent.innerHTML +=
                        `<div class="left"> 
                        <img src = "img/1.png" alt ="">
                         <p>${elecon.value}</p>
                         </div>`;
                }
            }
            // 这步是当输入完点击发送后 输入框的内容为空
            elecon.value = '';
        }


        // 旗帜法则
        var fas = 1;
        elepic.onclick = function() {
            if (fas == 1) {
                elepic.src = "img/1.png";
                fas = 2;
            } else {
                elepic.src = "img/2.png";
                fas = 1;
            }
        }
    </script>
</body>

</html>