用JavaScript做了个类似于通信的小东西_javascript做的东西-CSDN博客

本文链接：https://blog.csdn.net/qq_42623400/article/details/115378915
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #d1{
                background-image: url(../img/phone.png);
                background-size: 100% 100%;
                border: 1px solid white;
                width: 30%;
                height: 970px;
                margin: 0 auto;
            }
            #d2{
                width: 69%;
                background-color: lightgrey;
                margin-left: 15%;
                border: 0px solid black;
                height: 675px;
                margin-top: 135px;
                margin-bottom: 10px;
                OVERFLOW-Y: auto;
                OVERFLOW-X:hidden;
                text-align: center;
            }
            #d3{
                width: 70%;
                margin: 0px auto;
                padding: ;
            }
            .input1{
                height: 50px;
            }
            #img1{
                border: 1px solid black;
                width: 50px;
                border-radius:50px;
                float: right;
                text-align: right;
            }
            #img2{
                border: 1px solid black;
                width: 50px;
                border-radius:50px;
                float: left;
                text-align: left;
            }
            #p1{
                background-color: yellowgreen;
                float: right;
                text-align: right;
                border: 0px solid black;
                border-radius: 7px;
                width: 37%;
                margin-right: 20px;
                padding: 5px;
                word-wrap:break-word;
                word-break:break-all;
                overflow: hidden;
            }
            #p2{
                background-color: white;
                float: left;
                text-align: left;
                border: 0px solid black;
                border-radius: 7px;
                width: 37%;
                margin-left: 20px;
                padding: 5px;
                word-wrap:break-word;
                word-break:break-all;
                overflow: hidden;
            }
            #sf{
                width: 75px;
                height: 60px;
                border-radius:20px;
                background-size: 100% 100%;
                background-image: url(../img/111.jpg);
            }
            #fs{
                border: 2px solid yellowgreen;
                border-radius:10px;
                background-color: forestgreen;
                color: white;
            }
            #divEle1{
                text-align: right;
            }
            #divEle2{
                text-align: left;
            }
            .clear{ clear:both;}
        </style>
        <script type="text/javascript">
            var a = true;
            function fasong(){
                var mes = document.getElementById("mes").value;
                //获取id为d2的div节点
                var div2 = document.getElementById("d2");
                //创建一个P节点
                var pEle = document.createElement("p");
                //给p节点赋值
                pEle.innerHTML = mes;
                //new一个图片
                var img = new Image();
                //new一个div
                var divEle = document.createElement("div");
                if(a){
                    pEle.id = "p1";
                    img.id = "img1";
                    img.src="../img/111.jpg";
                    divEle.id = "divEle1";
                }else{
                    pEle.id = "p2";
                    img.id = "img2";
                    img.src="../img/222.jpg";
                    divEle.id = "divEle2";
                }
                //把图片放进新建的div里
                divEle.appendChild(img);
                //把p标签放到新建的div里
                divEle.appendChild(pEle);
                //再把div放进已有的div里
                div2.appendChild(divEle);
                //new一个用来清除浮动的DIV
                var clearDiv = document.createElement("div");
                clearDiv.className="clear";
                div2.appendChild(clearDiv);
            }
            function bianhuan(imm){
                if(a){
                    imm.style.backgroundImage="url(../img/222.jpg)";
                }else{
                    imm.style.backgroundImage="url(../img/111.jpg)";
                }
                a = !a;
            }
        </script>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
            </div>
<!----------------------------------------------------------------------------->
            <div id="d3">
                <table width="100%" align="center">
                    <tr>
                        <td><input id="sf" type="button" onclick="bianhuan(this)"/></td>
                        <td width="500px"><input id="mes" class="input1" style="width: 250px;"/></td>
                        <td><input id="fs" class="input1" type="button" value="发送" onclick="fasong()"/></td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>