我的梦想就是流浪天涯
导航

最新资源 > 源码仓库 > 网站源码 >

PHP源码_PHP网页在线聊天室无需数据库

知青   2020-05-05   网站源码   本地下载   热门的网站

NKES1](D]Y$U8Y1IUMNV31E.png

简洁的聊天PHP源码,信息显示ajax加载,上传即可访问!

html代码需要全代码请下载哦!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>网页聊天室</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>

    <style type="text/css">
        .talk_con{
            width:300px;
            height:500px;
            border:2px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        
        .talk_show{
            width:280px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:280px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:200px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script src="js/c.js"></script>
      <script src="js/jquery.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function () {  
        setInterval("sxx()",5000);
    });  
    
    window.onload = function(){
            var Words = document.getElementById("words");
            var TalkWords = document.getElementById("talkwords");
            var TalkSub = document.getElementById("talksub");
            var f = document.getElementById("f");
            

sxx();
            
            
            
            
            
            
            
            
            
            
            
            
var hh=window.screen.height-720;
var h= hh+'px';
f.style.height =h;
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  var n=getcookie('n');
if(n==null){
    
layer.prompt({
  formType: 2,
  value: '',
  title: '请设置你的用户名',
}, function(value, index, elem){
  setcookie('n',value)
  
  layer.close(index);
});
    
}else{
    layer.msg('欢迎你使用铭泽聊天室,请文明发言'+n);
}



});




            TalkSub.onclick = function(){
	            //定义空字符串
                var str = "";
                if(TalkWords.value == ""){
	                 // 消息为空时弹窗
                layer.msg("消息不能为空");
                    return;
                }
var n=getcookie('n');
               
var x=TalkWords.value;


               
$.ajax({
        url: 'ajax/fxx.php', //请求的url
        type: 'post', //请求的方式
        data: 'n='+n+'&x='+x,
        error:function (data) {
            alert('请求失败');
        },
        success:function (data) {
        if(data=="发送成功"){
            
            sxx();
            $("#talkwords").val("");
        }else{
            alert(data);
        }
}
});

            }
            
        }
        
        

        
        
    </script>
    <script>
    function sxx()  {     
var Words = document.getElementById("words");
            var TalkWords = document.getElementById("talkwords");
            var TalkSub = document.getElementById("talksub");
            var f = document.getElementById("f");
$.ajax({
        url: 'ajax/sxx.php', //请求的url
        type: 'post', //请求的方式
        data: '',
        dataType: 'json',
        error:function (data) {
            alert('请求失败');
        },
        success:function (data) {
var ii=data.user.length;
if(data.user.length<20){
    var i1=0;
}else{
    var i1=ii-20;
}
var stt="";

for (i=i1; i< ii; i++) {
var t=data.user[i].t;
var n=data.user[i].n;
var x=data.user[i].x;
var name=getcookie('n');
if(n==name){
st1='<div class="btalk"><span id="bsay">'+t+n+':'+x+'</span></div>';
    
}else{
st1='<div class="atalk"><span id="asay">'+t+n+':'+x+'</span></div>';
}
stt=stt+st1;
}
$("#words").html(stt);
Words.scrollTop = Words.scrollHeight;
        
        
    }
});
            
}
        
        
        
        
    </script>

<body>
<div class="layui-card-body layui-bg-blue">
    <div class="talk_con">
    <div class="talk_show" id="words">
    </div>
    <br>
<input type="text" placeholder="请输入消息"  id="talkwords" class="talk_word">
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="发送" class="layui-btn layui-btn-sm"id="talksub">

</div>

</div>
<div id="f" class="layui-card-body layui-bg-blue">
  <div class="layui-row">

  </div>



</div>

<!-- 你的HTML代码 -->
<script src="./layui/layui.js"></script>
<script language="javascript" type="text/javascript" src="http://js.users.51.la/18759442.js"></script>
</body>
</html>


原文标题:PHP源码_PHP网页在线聊天室无需数据库

原文地址:https://www.qqzla.com/wz/221.html

TAG标签:

下载地址:

本地下载  


赞助商