master

分支 (1)

管理

管理

master

chat-room
/
index.html

<!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">
    <!-- <meta http-equiv="refresh" content=".1"> -->
    <title>聊天室</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="back"></div>
            <div class="inf">
                <div class="photo"></div>
                <div class="nickname">Don't Study!（6）</div>
            </div>
            <div class="icon">
                <div class="phone"></div>
                <div class="video"></div>
                <div class="more"></div>
            </div>

        </div>
        <div id="center">

            <!-- <div class="message othermessage">
                <div class="portrait">
                    <img src="./img/other.jpeg" alt="tupian">
                </div>
                <div class="othtext">i'm lucy!</div>
            </div> -->


            <!-- <div class="message mymessage">
                <div class="portrait">
                    <img src="./img/my.jpeg" alt="tupian">
                </div>
                <div class="mytext">z打开了收到了快结束了看到可接受的离开 </div>
            </div> -->


        </div>
        <div class="footer">
            <div class="voice"></div>
            <input id="input" type="text" placeholder="Write your message..." value="">
            <div class="face"></div>
            <!-- <div class="send" id="send"></div> -->
            <input type="button" class="send" id="send"></input>
        </div>
    </div>
    <!-- <div id="test"></div> -->
    <script>

        function upload() {
            const xhr = new XMLHttpRequest();
            const username ="yizz";


            const message=document.getElementById('input').value;
            const url = 'https://developer.duyiedu.com/edu/groupChat/sendMsg?name=' + username + '&msg='+message+'';
            xhr.open('get', url);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // document.getElementById('test').innerText = xhr.responseText;
                    var data = JSON.parse(xhr.responseText);
                    // console.log(data)
                }
            }
            xhr.send();
        }


        function getInfo() {
            const xhr = new XMLHttpRequest();
            xhr.open("get", "https://developer.duyiedu.com/edu/groupChat/getMsgList");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // document.getElementById('test').innerText = xhr.responseText;
                    var data = JSON.parse(xhr.responseText);
                    console.log(data);

                    // var mymsg=document.getElementsByClassName('mytext')[0];
                    // var othmsg=document.getElementsByClassName('othtext')[0];
                    var content=document.getElementById('center');
                    for(let i=0;i<data.length;i++){

                        (function (num){
                             // console.log(data[i].name)
                            if(data[num].name=="yizz"){
                                let div=document.createElement('div');
                                div.className="message mymessage";
                                div.innerHTML='<div class="portrait"><img src="./img/my.jpeg" alt="tupian"></div><div class="mytext">'+data[num].msg+'</div>';

                                content.appendChild(div);
                            }else{
                                // createle
                                let div=document.createElement('div');
                                div.className="message othermessage";
                                // console.log(div)
                                // addcontent
                                div.innerHTML='<div class="portrait"><img src="./img/other.jpeg" alt="tupian"></div><div class="othtext">'+data[num].msg+'</div>';

                                // appendchild
                                content.appendChild(div);


                                // console.log(data[num].msg)
                                // var a='<div class="message othermessage"><div class="portrait"><img src="./img/other.jpeg" alt="tupian"></div><div class="othtext">'+data[num].msg+'</div></div>';
                                // content.innerHTML=a;
                            }
                        }(i))


                    }
                    var content=document.getElementById('center');

                     content.scrollTop=2000

                }

            }
            xhr.send();


        }

        getInfo();
        var sendbtn=document.getElementById('send');
        send.onclick=function(){
            // upload();
            // location.reload();
            var content=document.getElementById('center');

            content.scrollTop=2000
        }

        // 刷新
        // setInterval(function(){
        //     $("#center").load(location.href+" #center>*","")
        // },1000)
    </script>
</body>
</html>