对话框-CSDN博客

本文链接：https://blog.csdn.net/Krystal_rui/article/details/80915519
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            width: 1000px;
            margin:0 auto;
            display: flex;
            justify-content: space-around;
        }

        h1{
            width: 300px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: skyblue;
            border: 1px solid gray;
        }

        ul{
            list-style: none;
            width: 300px;
            height: 500px;
            background: lightsteelblue;
            border: 1px solid gray;
            border-top: none;
            overflow-y: auto;
        }

        input{
            width: 250px;
            height: 30px;
            margin-top: 20px;
        }

        li{
            width: 260px;
            margin:0 auto;
        }

    </style>
</head>
<body>
<div id="boxa">
<h1>小A</h1>
<ul class="frame">

</ul>
<input type="text">
<button id="btna">发送</button>
</div>

<div id="boxb">
<h1>小B</h1>
<ul class="frame">

</ul>
<input type="text">
<button id="btnb">发送</button>
</div>

<script>

        var ArrBox=document.getElementsByTagName("div");
        var BtnA=ArrBox[0].getElementsByTagName("button")[0];
        var BtnB=ArrBox[1].getElementsByTagName("button")[0];
        var Ipt=ArrBox[0].getElementsByTagName("input")[0];
        var IptB=ArrBox[1].getElementsByTagName("input")[0];
        var oUl=ArrBox[0].getElementsByTagName("ul")[0];
        var bUl=ArrBox[1].getElementsByTagName("ul")[0];

        BtnA.onclick=fn;
        Ipt.onkeydown=function(ev){
            var Event=ev||window.event;
            if(Event.ctrlKey&&Event.keyCode==13){
                fn();
            }
        }

        function fn(){
                if(Ipt.value==""){
                    alert("内容不能为空")
                }

                else{
                    var myDate=new Date();
                    var Month= myDate.getMonth()+1;
                    var time=myDate.getFullYear() + "年"
                            +Month + "月"
                            +myDate.getDate() + "日" + "&nbsp;"
                            +"星期"+myDate.getDay()+"&nbsp;"
                            +myDate.getHours()+":"
                            +myDate.getMinutes() + ":"
                            +myDate.getSeconds();

                    var oli=document.createElement("li");
                    var oli2=document.createElement("li");
                    var oli3=document.createElement("li");
                    var oli4=document.createElement("li");

                    oli.innerHTML=Ipt.value+"<br/>";
                    oli2.innerHTML=time+"<br />";
                    oli3.innerHTML=oli.innerHTML;
                    oli4.innerHTML=oli2.innerHTML;
                    Ipt.value="";
                    oli.style.textAlign="right";
                    oli3.style.textAlign="left";
                    oli2.style.textAlign="center";
                    oli4.style.textAlign="center";
                    oUl.appendChild(oli);
                    oUl.insertBefore(oli2,oli);
                    bUl.appendChild(oli3);
                    bUl.insertBefore(oli4,oli3);
                }
            }

        BtnB.onclick=bn;

        IptB.onkeydown=function(ev) {
            var Event = ev || window.event;
            if (Event.ctrlKey && Event.keyCode == 13) {
                bn();
            }
        }

            function bn(){
            if(IptB.value==""){
                alert("内容不能为空")
            }

            else{
                var myDate=new Date();
                var Month= myDate.getMonth()+1;
                var time= myDate.getFullYear() + "年"
                        +Month + "月"
                        +myDate.getDate() + "日" + "&nbsp;"
                        +"星期"+myDate.getDay()+"&nbsp;"
                        +myDate.getHours()+":"
                        +myDate.getMinutes() + ":"
                        +myDate.getSeconds();

                var oli=document.createElement("li");
                var oli2=document.createElement("li");
                var oli3=document.createElement("li");
                var oli4=document.createElement("li");
                oli.innerHTML=IptB.value+"<br/>";
                oli2.innerHTML=time+"<br />";
                oli3.innerHTML=oli.innerHTML;
                oli4.innerHTML=oli2.innerHTML;
                IptB.value="";
                oli.style.textAlign="left";
                oli3.style.textAlign="right";
                oli2.style.textAlign="center";
                oli4.style.textAlign="center";
                oUl.appendChild(oli);
                oUl.insertBefore(oli2,oli);
                bUl.appendChild(oli3);
                bUl.insertBefore(oli4,oli3);
            }
        }



</script>

</body>
</html>