聊天

来源：互联网发布：python能用来干什么编辑：程序博客网时间：2024/04/28 17:05

<!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>aaa</div>
<div>bbbb</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>aa</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

0 0