wfquery
Version:
like jQuery but just for new browser
82 lines (75 loc) • 2.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo/layout.html</title>
<script src="../wfQuery.js?_t=1516462775018"></script>
<!--
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>wfQuery = jQuery</script>
-->
<style>
pre.code{background: #d2d2d2;padding: 4px;}
</style>
</head>
<body>
<a href="../index.html">返回首页</a>
<link rel="stylesheet" href="css/chat.style.css">
<div id="convo" data-from="shy2850">
<ul class="chat-thread" id="chat">
</ul>
<fieldset >
<legend>输入面板</legend>
<form action="#" id="form">
<input type="text" name="msg" id="msg" style="width:300px;margin-right:20px;" placeholder="输入信息" required >
我的名字：<input type="text" name="name" id="name" placeholder="[昵称]" required > <br><br>
<input type="submit" value="发送">
</form>
</fieldset>
</div>
<script>
(function($) {
var root = "http://webfuture.cn:8973";
//var root = "http://localhost:8973";
var time = "", chat = $("#chat"), name;
while( !(name = window.prompt("请输入你的昵称进入聊天室!")) || name.match(/\s+/) );
$("#name").val(name);
$("#form").on("submit",function(e){
e.preventDefault();
var data = {
name: $("#name").val(),
method:"push",
msg: $("#msg").val()
};
$("#msg").val("");
$.jsonp(root,data,function(d){
console.log( '发送成功！' );
$("#msg").trigger("focus");
});
});
window.get = function(){
$.jsonp(root,{
name:$("#name").val(),
method:"pop",
time: time
},function(d){
time = d.time
d.msgList.forEach(function(m){
chat.prepend( $('<li></li>').text(m.name+":"+m.msg) );
});
window.get();
});
}
window.get();
window.onbeforeunload = function(){
$.jsonp(root,{
name:$("#name").val(),
method:"exit",
time: time
});
};
})(wfQuery)
</script>
<a href="https://github.com/shy2850/wfQuery.git" target="_"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>