聊天框（Alt+Enter组合键发送，不能为空）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天框</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            width: 800px;
            height: 500px;
            margin: 50px auto;
        }
        .head1{
            width: 350px;
            height: 500px;
            float: left;
        }
        .head2{
            width: 350px;
            height: 500px;
            float: right;
        }
        #box1,#box2{
            width: 300px;
            height: 350px;
            background: #6a9ccb;
            overflow-y: auto;
            word-wrap: break-word;
        }
        #txt1,#txt2{
            width: 240px;
            height: 50px;
            margin-top: 10px;
        }
        #fa1,#fa2{
            width: 50px;
            height: 50px;
            margin-top: 10px;
        }
        .name1,.name2{
            width: 300px;
            height: 40px;
            font:bold 20px/40px "";
            text-align: center;
            color: #a81e32;
            background: #00A7F6;
        }
    </style>
</head>
<body>
<div class="head">
    <div class="head1">
        <div class="name1">Me</div>
        <div id="box1"></div>
        <input type="text" id="txt1">
        <input type="button" value="发送" id="fa1">
    </div>
    <div class="head2">
        <div class="name2">You</div>
        <div id="box2"></div>
        <input type="text" id="txt2">
        <input type="button" value="发送" id="fa2">
    </div>
</div>
<script>
    var box=document.getElementById("box1");
    var newbox=document.getElementById("box2");
    var txt=document.getElementById("txt1");
    var newtxt=document.getElementById("txt2");
    var fa=document.getElementById("fa1");
    var newfa=document.getElementById("fa2");
    fa.onclick=fn;
    txt.onkeydown = function (ev){
        var even = window.event || ev;
        if(even.altKey&&even.keyCode==13) {
            fn()
        }
    }
    function fn() {
        var otxt = txt.value;
        if(otxt==""){
            alert("不能为空")
        }else {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth() + 1
            var date = time.getDate();
            var day = time.getDay();
            var hour = time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var Time = year + "年" + month + "月" + date + "日" + " "
                + "星期" + day + " " + hour + ":" + minute + ":" + second;
            var ep = document.createElement("p");
            box.appendChild(ep)
            var op = document.createElement('p');
            box.appendChild(op);
            op.style = "text-align:right";
            var rp = document.createElement("p");
            newbox.appendChild(rp)
            var ap = document.createElement('p');
            newbox.appendChild(ap);
            ep.style = 'text-align:center;color:#ccc;font:10px ""';
            rp.style = 'text-align:center;color:#ccc;font:10px ""';
            txt.value = "";
            ep.innerHTML = Time;
            rp.innerHTML = Time;
            op.innerHTML = otxt + "<br>";
            ap.innerHTML = otxt + "<br>";

        }
    }

    newfa.onclick=fm;
    newtxt.onkeydown = function (ev){
        var even = window.event || ev;
        if(even.altKey&&even.keyCode==13) {
            fm()
        }
    };
        function fm() {
        var ntxt=newtxt.value;
        if(ntxt==""){
            alert("不能为空")
        }else {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth() + 1
            var date = time.getDate();
            var day = time.getDay();
            var hour = time.getHours();
            var minute = time.getMinutes();
            var second = time.getSeconds();
            var Time = year + "年" + month + "月" + date + "日" + " "
                + "星期" + day + " " + hour + ":" + minute + ":" + second;
            var tp=document.createElement("p");
            box.appendChild(tp)
            var sp=document.createElement('p');
            box.appendChild(sp);
            var yp=document.createElement("p");
            newbox.appendChild(yp)
            var pp=document.createElement('p');
            newbox.appendChild(pp);
            pp.style="text-align:right";
            tp.style='text-align:center;color:#ccc;font:10px ""';
            yp.style='text-align:center;color:#ccc;font:10px ""';
            newtxt.value="";
            tp.innerHTML=Time;
            yp.innerHTML=Time;
            pp.innerHTML=ntxt+"<br>";
            sp.innerHTML=ntxt+"<br>";
        }


    }


</script>
</body>
</html>
聊天框（Alt+Enter组合键发送，不能为空）

猜你喜欢
