手把手写网页实时聊天系统!
2016-05-12 00:00
387 查看
摘要: 网页实时聊天。
将以下代码另存为html文件,打开,即可聊天!
将以下代码另存为html文件,打开,即可聊天!
[code=plain] <!DOCTYPE HTML> <html> <head> <title>笔墨风格</title> <meta charset="utf8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" /> <style> @charset"utf-8"; html, body, div, span, img, a, button, em, h1, h2, h3, h4, h5, h6, iframe, input, object, ul, ol, li, p, form, select, table {margin:0;padding:0;border:0;outline:0;box-sizing:border-box} :after, :before {box-sizing:border-box} body, html {position:absolute;left:0;top:0;right:0;bottom:0;background-color:#2a2a2a;overflow-X:hidden;z-index:-999} h1, h2, h3, h4, h5, h6 {font-size:100%} table {border-spacing:0;border-collapse:collapse} textarea {overflow:auto;resize:none;vertical-align:top} button, input, select {overflow:visible} a {text-decoration:none} a.disabled, a.disabled:hover {pointer-events:none} :active, :focus, :hover, :link, :visited {outline:0;text-decoration:none} button[disabled], input[disabled] {background-color:#666} ol, ul {list-style:none;height:auto;width:100%} a, button, span {display:inline-block;cursor:pointer} input[type=button] {cursor:pointer} .fl {float:left} .fr {float:right} .clearfix:after {content:"\20", display:block;font-size:0;height:0;clear:both;visibility:hidden} .clearfix {zoom:1} .show {display:block!important} .hidden {display:none!important} /*左右边侧栏菜单代码*/ .BimoMenu{position:absolute;top:0;bottom:0;left:0;width:120px;z-index:-1;background-color:#222;border-right:2px solid #333} .BimoMenu>h3{width:120px;height:50px;line-height:50px;color:#f60;text-align:center} .BimoMenu>h3::before{content:"";position:absolute;width:100%;height:2px;background-color:#f60;top:25px;left:0;opacity:.3;border-radius:50%} .BimoMenu>ul{position:absolute;top:49px;bottom:0;left:0;width:100%;} .BimoMenu>ul>li{display:block;height:35px;line-height:35px;background-color:#2a2a2a;color:#999;margin-bottom:2px;font-size:12px;font-weight:bold;padding-left:10px;} .BimoMenu>ul>li>div{display:inline-block;float:left;width:0;height:0;border-width:10px;border-style:solid;border-color:#999 #666 #999 #666;border-radius:50%;margin-top:7px;} .BimoMenu>ul>li>a{float:left;margin-left:10px;height:35px;line-height:35px;color:#999} .BimoInfo{position:absolute;top:0;bottom:0;right:0;width:120px;z-index:-2;background-color:#222;border-left:2px solid #333} .BimoInfo>h3{width:120px;height:50px;line-height:50px;color:#f60;text-align:center} .BimoInfo>h3::before{content:"";position:absolute;width:100%;height:2px;background-color:#f60;top:25px;left:0;border-radius:50%;opacity:.3;} .BimoInfo>ul{position:absolute;top:49px;bottom:0;left:0;width:100%;} .BimoInfo>ul>li{display:block;height:35px;line-height:35px;background-color:#2a2a2a;color:#999;margin-bottom:2px;font-size:12px;font-weight:bold;padding-left:10px;} .BimoInfo>ul>li>div{display:inline-block;float:left;width:0;height:0;border-width:10px;border-style:solid;border-color:#999 #666 #999 #666;border-radius:50%;margin-top:7px;} .BimoInfo>ul>li>a{float:left;margin-left:10px;height:35px;line-height:35px;color:#999} /*通用底部样式*/ .Bimo>.Foot{position:absolute;bottom:0;left:0;right:0;height:45px} .Bimo>.Foot>input {height:45px;width:80%;float:left;padding-left:20px;font-weight:bold;color:#999;} .Bimo>.Foot>span {height:45px;line-height:45px;text-align:center;width:20%;float:right;background-color:#f60;color:#fff;font-weight:bold;cursor:pointer} /*通用样式*/ .Bimo{position:absolute;top:0;bottom:0;width:100%;transition:all .2s;z-index:8888;} .Bimo>.Head{position:absolute;height:50px;top:0;width:100%;margin:0 auto;background-color:#000;color:#0f0;font-weight:bold;text-align:center;border-bottom:2px solid #ea8010;z-index:99999;overflow:hidden;} .Bimo>.Head>span{width:50px;height:49px;} .Bimo>.Head>span>img{width:32px;height:32px;line-height:49px;margin-top:8px} .Bimo>.Head>.Msg{position:absolute;left:50px;right:49px;height:49px;} .Bimo>.Head>.Msg>div{height:25px;line-height:25px;font-size:12px;} /*通用中间样式*/ .Bimo>#div{position:absolute;top:50px;bottom:0;left:0;right:0;width:100%;overflow:auto;background-color:#2a2a2a;} .Bimo>.ul{position:absolute;top:50px;bottom:0;left:0;right:0;width:100%;overflow:auto;background-color:#2a2a2a;} .Bimo>.ul>li{display:inline-block;height:35px;line-height:35px;font-size:12px;font-weight:bold;background-color:#2c2c2c;margin:5px;padding:0 5px;} .Bimo>.ul>li>a{height:20px;line-height:20px;color:#ddd;} /*笔墨聊天样式*/ .Bimo>.chat{position:absolute;top:50px;bottom:45px;left:0;right:0;width:100%;overflow:auto;background-color:#2a2a2a;} .Bimo>.chat>li{display:block;height:40px;line-height:40px;font-size:12px;font-weight:bold;background-color:#2c2c2c;margin:5px;padding:0 5px;} .Bimo>.chat>li>div{height:20px;line-height:20px;color:#ddd;} .Bimo>.chat>li>div>a{display:inline-block;height:20px;float:left;color:#ddd;font-size:14px;color:#0a8} .Bimo>.chat>li>div>span{height:20px;float:right;font-size:12px;color:#666} </style> <script src = "https://cdn.wilddog.com/sdk/js/current/wilddog.js" ></script> </head> <body> <div class="Bimo" id="Bimo" style="position:absolute;top:0;bottom:0;width:100%;transition:all .2s;z-index:8888;"> <div class="Head"> <span class="fl" id="Menu"><img src="../img/menu2.png"></span> <div class="Msg"> <div><!--笔墨风格交流群:333043975--></div> <div><!--笔墨风格贴吧:笔墨风格--></div> </div> <span class="fr" id="Info"><img src="../img/infomale.png"></span> </div> <ul id="chat" class="chat"> </ul> <div class="Foot"> <input type="text" placeholder="输入信息" id="code"/><span id="Enter">发送</span> </div> </div> <div class="BimoMenu" id="BimoMenu"> <h3>笔墨风格</h3> <ul> <li><div></div><a href="##">没有</a></li> <li>没有项目...</li> </ul> </div> <div class="BimoInfo" id="BimoInfo"> <h3>个人操作</h3> <ul> <li><div></div><a href="grxx.php">个人信息</a></li> <li><div></div><a href="mrqd.php">每日签到</a></li> <li><div></div><a href="xgmm.php">修改密码</a></li> <li><div></div><a href="qhzh.php">切换账号</a></li> </ul> </div> <script> window.Bimo = (function(){ var F = { xid:function(o){return document.getElementById(o) || ''}, xtg:function(o){return document.getElementById(o) || ''}, xcl:function(o){return document.getElementById(o) || ''}, TimeFormat:function(o){ var Add = function(o){return o < 10 ? "0" + o : o}; var time = new Date(o); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return Add(m)+'-'+Add(d)+' '+Add(h)+':'+Add(mm)+':'+Add(s); }, Get:function(o){ var xml=new XMLHttpRequest(); xml.open("GET",o.u,true); xml.onreadystatechange=function(){ if(xml.readyState == 4){ if(xml.status == 200){ o.y(xml.responseText); }else{ o.n(); } } } xml.send(); }, Ajax:function(url, options) { var oAjax = new XMLHttpRequest(); var param = ""; var data = options.data ? options.data : -1; if (typeof (data) === "object") { for (var key in data) { if (data.hasOwnProperty(key)) { param += key + "=" + data[key] + "&"; } } param.replace(/&$/, ""); } else { param = "timestamp=" + new Date().getTime(); } var type = options.type ? options.type.toUpperCase() : "GET"; if (type === "GET") { oAjax.open("GET", url + "?" + param, true); oAjax.send(); } else { oAjax.open("POST", url, true); oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oAjax.send(param); } oAjax.onreadystatechange = function () { if (oAjax.readyState === 4) { if (oAjax.status === 200) { options.onsuccess(oAjax.responseText, oAjax); } else { if (options.onfail) { options.onfail(oAjax); } } } }; return oAjax; } } return F; })(); var s=1,menu = Bimo.xid("Menu"),info = Bimo.xid("Info"),bimostyle = Bimo.xid("Bimo"); menu.onclick = function(){s ? (s--,bimostyle.style.left = "120px") : (s++,bimostyle.style.left = "");} info.onclick = function(){s ? (s--,bimostyle.style.right = "120px") : (s++,bimostyle.style.right = "");} </script> <script> window.onload = function(){ var bimochat = new Wilddog("https://bimochat.wilddogio.com/"), chat = Bimo.xid("chat"), code = Bimo.xid("code"), enter = Bimo.xid("Enter"), li = document.querySelectorAll("#Bimostyle li"), l = li.length; enter.onclick=function(){ var str = code.value.replace(/(^\s+)|(\s+$)/g, ""); var inl = str.length; if(code.value=="cls"){ bimochat.remove(); }else{ if( inl< 36 && inl >= 1){ bimochat.push({"username":"陈随易","msg":code.value,"datetime":Wilddog.ServerValue.TIMESTAMP}); code.value = ""; }else{ code.value = ""; code.placeholder = "信息不能为空或小于36个字符"; } } } bimochat.limitToLast(10).on("child_added",function(data){ var li=document.createElement("li"); li.innerHTML="<div><a href='###'>"+data.val().username+"</a><span>"+Bimo.TimeFormat(data.val().datetime)+"</span></div><div>"+data.val().msg+"</div>"; chat.appendChild(li); chat.scrollTop = chat.scrollHeight; }); document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==13){ var str = code.value.replace(/(^\s+)|(\s+$)/g, ""); var inl = str.length; if(code.value=="cls"){ bimochat.remove(); }else{ if( inl< 36 && inl >= 1){ bimochat.push({"username":"陈随易","msg":code.value,"datetime":Wilddog.ServerValue.TIMESTAMP}); code.value = ""; }else{ code.value = ""; code.placeholder = "信息不能为空或小于36个字符"; } } } }; }; </script> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享