版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/fjxcsdn/article/details/85386479
QQ 空间网页。
需求：1.存在评论区，评论区有字数限制
2.可以@ 好友
3.可以添加表情等
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>欢迎来到哼着调调的空间</title>
<link href="css/main.css" rel="stylesheet" />
<script src="script/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var userFaces = {
'0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '得意',
'4.gif': '流泪', '5.gif': '害羞', '6.gif': '闭嘴', '7.gif': '睡',
};
$(function () {
$('#msgTxt').val("#输入话题标题")
//第一步骤：设置文本框字符个数，超过140个显示超了多少字，变为红色，没有超过默认个数，显示还可以输入的字符数
.keyup(function () {
var txtLength = 140 - $(this).val().length;
if (txtLength >= 0) {
$('.countTxt').css('color', 'black').html('还能输入<em>' + txtLength + '</em>字')
}
else {
$('.countTxt').css('color', 'red').html('已超过<em>' + -1 * txtLength + '</em>字')
}
})
//广播的点击事件：如果文本框为空，这是默认是#输入话题标题，且让文本高亮显示
$('.sendBtn').click(function () {
//文本框为空，设置默认的标题
if ($('#msgTxt').val() == '') {
$('#msgTxt').val('#输入话题标题');
}
//如果文本框存在默认标题，高亮显示
if ($('#msgTxt').val() == '#输入话题标题') {
//setSelectionRange(indexStart,indexEnd)方法进行选择，indexStart表示字的开始索引，indexEnd表示字的结束索引，结果中不含indexEnd指定的字符
$('#msgTxt')[0].setSelectionRange(1, 7)// $('#msgTxt')[0] :Jquery 对象转为dom对象
}
})
//设置广播按钮的背景图片，使其指向移开发生变化
.hover(function () {//指向
$(this).css('background-position', '-0px -195px');
}, function () {//移开
$(this).css('background-position', '-117px -165px')
});
//设置@好友
$('.atSome').click(function (e) {
//声明一个好友列表
var friendsList = ['小哲哲', '臭屁屁', '奥特曼', '孙悟空', '喜洋洋', '灰太狼'];
var divFriendList = $('#divFriendList');//获取好友列表信息
if (divFriendList.length > 0) {//好友信息列表只能显示一次
return;
}
//创建一个DIV，好友信息添加到DIV中
var divFriendList = $('<div></div>').css({
'position': 'absolute',
'left': e.clientX + 'px',
'top': e.clientY + 'px',
'weight': '200px',
'height': '120px',
'border': '1px solid pink',
'background-color': 'pink',
'padding': '5px', //内部文字贴边
}).appendTo('body');
$.each(friendsList, function () {
$('<span>' + this + '</span><br>')
.css('course', 'pointer')//设置小手图标
.one('click', function () {
//点击@好友事件，将@ 好友放置在文本文档后面,
//.one('click',function ())相同的人只能@ 一次
$('#msgTxt').val($('#msgTxt').val() + '@' + $(this).text());
}).appendTo(divFriendList);//将span显示到div上
});
//增加一个关闭按钮
$('<span>×</span>')
.css('course', 'pointer')//设置小手图标
.click(function () {
divFriendList.remove();
}).appendTo(divFriendList);
});
//设置图片
$('.insertFace').click(function (e) {
var divFace = $('#divFace');//获取表情信息
if (divFace.length > 0) {//表情存在不做任何操作
return;
}
//创建一个DIV，好友信息添加到DIV中
divFace = $('<div id="divFace"></div>')
.css({
'position': 'absolute',
'left': e.clientX + 'px',
'top': e.clientY + 'px',
'weight': '100px',
'height': '40px',
'border': '1px solid pink',
'background-color': 'white',
//'padding': '5px', //内部文字贴边
}).appendTo('body');
$.each(userFaces, function (key, value) {
$('<img src="faces/' + key + '" id="' + value + '"/>"')
.click(function () {//将图片添加到文本后面
$('#msgTxt').val($('#msgTxt').val() + '[' + $(this).attr('id') + ']');
}).appendTo(divFace);//将span显示到div上
});
//增加一个关闭按钮
$('<br><span>×</span>')
.css('course', 'pointer')//设置小手图标
.click(function () {
divFace.remove();
}).appendTo(divFace);
});
});
</script>
</head>
<body>
<img id="logo" src="img/b3_100901.png" alt="" />
<center>
<div id="myBody">
<div id="myBdLeft">
<div id="talkBox">
<h2>
<a>廊坊的冬至走了，夏天马上就来了......</a>
</h2>
<textarea id="msgTxt"></textarea>
<div id="funBox">
<a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
<a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
class="uploadVideo">视频</a>
</div>
<div id="sendBox">
<input type="button" class="sendBtn" value="" />
<span class="countTxt">还能输入<em>140</em>字</span>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
效果展示：
如果本篇博客对您有所帮助，记得点赞哦！