客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
这几天写了一个小项目，初衷是自己写一个有前端，有后端的东西练练手，所以，实际意义并不大，只是拿来试试手而已。 我对这个聊天室的构想是这样的：先建两个数据库，一个保存用户名和密码，另一个保存用户名和发送的信息，并记录发送的时间，网页上也想了很多骚操作，但是最后也就简简单单的卡了几张图在两边，简洁，勉强算是美观可看。用户登陆之后，网页就开始下载数据库的信息，并把用户发送的信息一个个垒成盒子向腾讯一样发出来。额。。。想来真是简单，我竟然写了一星期左右。 时间其实大部分耗费在处理后台发送过来的数据上面，查了很多资料，总是不得其法，后面终于慢慢摸索出来了，要在后台先把数据转换成json格式，然后在js里面转为数组，之后就可以随便拆分。 好了，上代码吧 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>chat with sb</title> <meta charset="utf-8" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.cookie.js"></script> <script src="js/index.js"></script> <style type="text/css"> a{cursor: pointer;} img{height:100%;} div{overflow:hidden;border: 1px solid black;text-align: center;} #left{position: absolute;top:0px;left:0px;width:25%;height:100%} #right{position: absolute;top:0px;right:0px;width:25%;height:100%} #sign{position: absolute;right:50%;margin-right: -24%;width:80px;height:auto} #main{position: absolute;top:50px;left:50%;margin-left: -24%;width: 48%;height:700px;} .show{height:70%;margin:10px 10px 10px 10px;overflow: auto;} .text{height:25%;margin:10px 10px 10px 10px;} #signUp,#signIn{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px} a:hover{background-color: #C71585;} #writeIn{width:100%;height:80%;border:none} #exit{position: absolute;right:1px;top:1px;} .insert{text-align: left;width: -webkit-fit-content;margin-left:10px;margin-top:10px ;padding: 5px 5px 5px 5px;background-color:#C71585;} .insert a:hover{background-color: white;} .insert a{cursor: auto;} </style> </head> <body> <div id="left"><img src="img/left.jpg" /> </div> <div id="right"><img src="img/right.jpg" /></div> <div id="sign"><a onclick="signIn()">登陆</a><a onclick="signUp()">注册</a> </div> <div id="main"> <div class="show"><a id="more">更多消息</a></div> <div class="text"><textarea id="writeIn"></textarea><button onclick="send()">发送</button></div> </div> <script type="text/javascript"> newInsert('sb','2017-7-22 16:02:24','在吗?'); var a=new ajax(); setInterval("a.aja()",1000); function ajax(){ var maxid=0; this.aja=function(){ if($.cookie('username')==null){ return; } $.post("http://127.0.0.1/timeFigure.php",{ max:maxid },function(data,status){ var obj = JSON.parse(data); obj=obj.reverse(); for(var i=0;i<obj.length;i++){ newInsert(obj[i].user,obj[i].date,obj[i].str); }; maxid=obj[i-1].id; } ); }; }; function newInsert(user,time,str){ var insert=$("<div class='insert'></div>"); insert.html("<a>"+user+" "+time+"<br />"+str+"</a>"); $(".show").append(insert); }; function signIn(){ $("body").css("background-color","#999999"); $("#writeIn").css("background-color","#999999"); var sign=$("<div id='signIn'></div>"); sign.html("<br/><br/>用户名：<input type='text' id='user'/><br />密码：<input type='password' id='password'/><br /><br /><button onclick='submitIn()'>提交</button>"); $("body").append(sign); sign.css("background-color","white"); var exitDiv=$("<button onclick='exit()' id='exit'>X</button>"); sign.append(exitDiv); }; function signUp(){ $("body").css("background-color","#999999"); $("#writeIn").css("background-color","#999999"); var sign=$("<div id='signUp'></div>"); sign.html("<br/><br/>用户名：<input type='text' id='user' /><br />密码：<input type='password' id='password'/><br /><br /><button onclick='submitUp()'>提交</button>"); $("body").append(sign); sign.css("background-color","white"); var exitDiv=$("<button onclick='exit()' id='exit'>X</button>"); sign.append(exitDiv); }; function exit(){ $("#exit").parent().remove(); $("body").css("background-color","white"); $("#writeIn").css("background-color","white"); }; function submitIn(){ $.post("http://127.0.0.1/signIn.php",{ user:$("#user").val(), password:$("#password").val() },function(data,status){ if(data){ $.cookie('username',data); $("#sign").html("你好，"+$.cookie('username'));exit(); } else { alert("密码错误"); } }); }; function submitUp(){ $.post("http://127.0.0.1/signUp.php",{ user:$("#user").val(), password:$("#password").val() },function(data,status){ var COOKIE_NAME='username'; //cookie异常 $.cookie(COOKIE_NAME,data,{ expires: 7 全部评论
专题导读
热门推荐
热门话题
 阅读排行榜
|
请发表评论