JQuery聊天框 <!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/jquery-1.12.4.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
ul li,ol li{
list-style: none;
}
a{
text-decoration: none;
}
.first{
width: 600px;
height: 610px;
border: 1px solid black;
margin: 0 auto;
}
.last{
width: 100%;
overflow: auto;
height: 450px;
}
textarea{
width: 99.9%;
height: 70px;
border: none;
outline: none;
}
input[type=button]{
float: right;
width: 70px;
height: 40px;
line-height: 40px;
text-align: center;
background: #688af0;
border-radius: 10px;
margin: 3px 5px 0 0;
}
img,.l>p{
float: left;
margin-right: 10px;
}
h5{
color: #6b83ef;
margin-bottom: 5px;
}
span{
display: inline-block;
width: 500px;
border-radius: 4px;
background: #e3e3e3;
line-height: 30px;
text-indent: 10px;
}
</style>
</head>
<body>
<div class="first">
<div class="last"></div><!--聊天内容出现处-->
<img src="../img/icon.jpg" alt="" width="600px">
<textarea name="wb" id="wb" cols="30" rows="10"></textarea><!--输入文本处-->
<input type="button" value="发送(s)">
<input type="button" value="关闭(c)">
</div>
</body>
<script type="text/javascript">
//1.创建图片,名字数组
var img= ["../img/head01.jpg","../img/head02.jpg","../img/head03.jpg"];
var username =["小明","小红","小蓝"];
$(document).ready(function () {
//2.点击关闭关闭页面
$("input[value*=c]").click(function () {
$(".first").hide();
});
//3.点击发送显示内容
$("input[value*=s]").click(function () {
if ($("textarea").val()==""){
alert("请输入内容")
}else{
var num=Math.ceil(Math.random()*2);
var tx=$("textarea").val();
$(".last").append("<div><img src="+img[num]+" alt=''><p><h5>"+username[num]+"</h5><span>"+tx+"</span></p></div>");
$("textarea").val("");
}
})
})
//4.键盘录入回车键发送
.keydown(function (event) {
if (event.keyCode===13){
if ($("textarea").val()==""){
alert("请输入内容")
}else{
var num=Math.floor(Math.random()*3);
var tx=$("textarea").val();
$(".last").append("<div><img src="+img[num]+" alt=''><p><h5>"+username[num]+"</h5><span>"+tx+"</span></p></div>");
$("textarea").val("").blur();
}
}
});
</script>
</html>
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)