在线聊天室制作 | Online-Chat

最新推荐文章于 2022-09-09 00:26:43 发布
chengyannai7348
最新推荐文章于 2022-09-09 00:26:43 发布
阅读量251
点赞数
原文链接：https://my.oschina.net/zbly/blog/496886
版权
 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX TEST  留言板</title>
    <script  src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #wrap{
            margin:10px auto;
            width:500px;
            height:600px;
            border:0;
            border-radius:10px;
            padding:10px;
            background:#fff;
            box-shadow:0 0 10px rgba(0,0,0,0.1);
        }
        #content{
            position:absolute;
            width:280px;
            height:380px;
            background:#eee;
            padding:10px;
            border-radius:5px;
            font-size:14px;
            color:#888;
        }
        #content #cShow{
            margin-top:5px;
            width:280px;
            height:355px;
            padding-top:5px;
            text-indent: 5px;
            border-radius:5px;
            background:#fff;
            box-shadow:0 0 10px rgba(0,0,0,0.1);
        }
        #list{
            float:right;
            width:190px;
            height:380px;
            padding:10px;
            border-radius:5px;
            font-size:14px;
            color:#888;
            background:#eee;
        }
        #list #nameList{
            margin-top:5px;
            width:190px;
            height:355px;
            padding-top:5px;
            text-indent: 5px;
            border-radius:5px;
            background:#fff;
            box-shadow:0 0 10px rgba(0,0,0,0.1);
        }
        #form{
            margin-top:410px;
            width:480px;
            height:170px;
            padding:10px;
            border-radius:5px;
            background:#eee;
        }
        #form #getInfo{
            width:480px;
            height:125px;
            border:0;
            border-radius:5px;
            box-shadow:0 0 10px rgba(0,0,0,0.1);
            font-size:14px;
            text-indent:5px;
            padding-top:5px;
        }
        #form #getName{
            width:170px;
            height:32px;
            margin-top:7px;
            font-size:14px;
            text-indent:5px;
            color:#999;
            border:0;
            border-radius:3px;
            box-shadow:0 0 10px rgba(0,0,0,0.1);
        }
        #form span{
            font-size:14px;
            color:#888;
            margin-left:5px;
        }
        #form #submit{
            float:right;
            width:100px;
            height:31px;
            margin-top:7px;
            border:0;
            border-radius:3px;
            box-shadow:0 2px 1px rgb(145,13,35);
            background:#e8554e;
            color:#fff;
            cursor:pointer;
        }
        #form #submit:hover{
            background:#555;
            box-shadow:0 2px 1px black;
        }
        
    </style>
</head>
<body>
    <div id="wrap" >
        <div id="content" >
            <h4>内容显示如下:</h4>
            <div id="cShow" ></div>
        </div>
        <div id="list" >
            <h4>当前在线名单:</h4>
            <ul id="nameList" ></ul>
        </div>
        <div id="form" >
            <form>
                <textarea rows="3" cols="20" id="getInfo" placeholder="请输入内容……" ></textarea>
                <input type="text" id="getName" name="getName" placeholder="请输入姓名……" >
                <span>Status:</span>
                <span id="status" >        </span>
                <input type="submit" id="submit" name="submit" value="Submit" >
            </form>
        </div>
    </div>
    
    <script>
        $(function(){
            $("#submit").bind("click",function(){
                if(($('#getInfo').val()!='')&&($('#getName').val()=='')){alert('请输入姓名');}
                if(($('#getInfo').val()=='')&&($('#getName').val()!='')){alert('请输入信息');}
                if(($('#getInfo').val()=='')&&($('#getName').val()=='')){alert('请输入姓名和信息');}
                if(($('#getInfo').val()!='')&&($('#getName').val()!='')){
                    $('#status').html("Starting……");
                    setTimeout(function(){
                        $('#status').html("Stop!");
                    },2000)
                    addName();
                    addMsg();
                    $('#getInfo').val("");
                    $('#getName').val("");
                    return false;
                }
            })
        })
        
        function addName(peopleName){
            var peopleName = $('#getName').val();
            if(peopleName){
                var $name = "<li >"+peopleName+"</li>";
                $('#nameList').append($name);
            }
        }
        
        function addMsg(){
            var dates = new Date();
            var years = dates.getFullYear();
            var month = dates.getMonth()+1;
            var days = dates.getDay();
            var hours = dates.getHours();
            var minutes = dates.getMinutes();
            var seconds = dates.getSeconds();
            var time = years+"年"+month+"月"+days+"日"+hours+":"+minutes+":"+seconds;
            var $people_name = $("#getName").val();
            var $people_info = $("#getInfo").val();
            var $fullMsg = "<span>"+"“"+$people_name+"”"+"于"+"&nbsp"+time+"&nbsp"+"说:"+$people_info+"</br>"+"</span>";
            $("#cShow").append($fullMsg);
        }
    </script>
</body>
下面是案例界面：