求源码 -慕课网

                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /人人网评论功能

求源码

阿科

2014-08-06

源自：人人网评论功能 6-2

关注问题我要回答

757

操作

收起

2 回答

qq_慕标7102504
2023-05-27

<!DOCTYPE html>

<html>

<head>

<title>人人网评论</title>

body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}

li { list-style: none}

a { color: #333; text-decoration: none;}

a:hover { text-decoration: underline;}

* { margin: 0; padding: 0; border: none;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}

.clearfix { *height:1%;}

#list { margin: 0 auto; text-align: left; width: 540px;}

.box { border-top: 1px solid #eee; position: relative; width: 540px; padding: 20px 0}

.box:hover .close { display: block;}

.close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}

.close:hover { background: #c8d2e2; text-decoration: none;}

.head { float: left; width: 60px; height: 60px; margin-right: 10px;}

.content { float: left; width: 440px;}

.main { margin-bottom: 10px;}

.txt { margin-bottom: 10px;}

.user { color: #369; }

.pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}

.info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}

.info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("images/bg1.jpg") no-repeat left top;}

.info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("images/bg2.jpg") no-repeat left top;}

.info .praise:hover { text-decoration: underline; background: url("images/bg3.jpg") no-repeat left top;}

.praises-total { margin: 0 0 10px 0; height: 20px; background: url("images/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}

.comment-box { padding: 10px 0; border-top: 1px solid #eee;}

.comment-box:hover { background: rgb(247, 247, 247);}

.comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}

.comment-box .comment-content { float: left; width: 400px; }

.comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}

.comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("images/praise.png") no-repeat; position: absolute; bottom: 0px; right: 44px;}

.comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px; position: absolute; bottom: 0px; right: 10px;}

.comment-box .comment-content:hover .comment-praise { display: inline-block;}

.comment-box .comment-content:hover .comment-operate { display: inline-block;}

.text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}

.text-box .btn { font-size: 12px; font-weight: bold; display: none; float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}

.text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}

.text-box .word{ display: none; float: right; margin: 7px 10px 0 0; color: #666;}

.text-box-on .comment{ height: 50px; color: #333; width:440px;resize: none;}

.text-box-on .btn{ display: inline;}

.text-box-on .word{ display: inline;}

</style>

window.onload= function () {

var list = document.getElementById('list');

var lis = list.children;

var timer;

// 定义删除节点函数removeNode

function removeNode(node){

node.parentNode.removeChild(node);//：父节点的子节点

}

//定义赞分享函数praiseBox

function praiseBox(box,el){

var txt = el.innerHTML;

var praiseElement = box.getElementsByClassName('praises-total')[0];

var oldTotal = parseInt(praiseElement.getAttribute('total'));

var newTotal;

if(txt == '赞'){

el.innerHTML = '取消赞';

newTotal = oldTotal + 1;

praiseElement.innerHTML = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal + '个人觉得很赞';

}

else{

el.innerHTML = '赞';

newTotal = oldTotal - 1;

praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '个人觉得很赞';

}

praiseElement.setAttribute('total',newTotal);//及时更新点赞人的总数，total是事件是属性，在html里有出现

praiseElement.style.display = (newTotal == 0) ? 'none' : 'block';

}

//定义格式化日期函数getTime

function getTime(){

var date = new Date();

var y = date.getFullYear();

var m = date.getMonth();

var d = date.getDate();

var h = date.getHours();

var mi = date.getMinutes();

m = (m < 10) ? '0' + m : m;

d = (d < 10) ? '0' + d : d;

h = (h < 10) ? '0' + h : h;

mi = (mi < 10) ? '0' + mi : mi;

return y + '-' + m + '-' + d + ' ' + h + ':' + mi;

}

//定义发表评论函数replyBox

function replyBox(box){

var textarea = box.getElementsByTagName('textarea')[0];

var list = box.getElementsByClassName('comment-list')[0];

var li = document.createElement('li');

li.className = 'comment-box clearfix';

li.setAttribute('user','self');

var html = '<img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt="">' +

'<div class="comment-content">' +

'<p class="comment-text"><span class="user">我：</span>' + textarea.value + '</p>' +

'<p class="comment-time">' +

getTime() +

'<a href="javascript:;" class="comment-praise" total="0" my="0" style="">赞</a>' +

'<a href="javascript:;" class="comment-operate">删除</a></p></div>';

li.innerHTML = html;

list.appendChild(li);

textarea.value ='';

textarea.onblur();

}

//定义赞回复函数praiseReply

function praiseReply(el){

var oldTotal = parseInt(el.getAttribute('total'));

var my = parseInt(el.getAttribute('my'));

var newTotal;

if(my == 0){

newTotal = oldTotal + 1;

el.setAttribute('total',newTotal);

el.setAttribute('my',1);

el.innerHTML = newTotal + ' 取消赞';

}

else{

newTotal = oldTotal - 1;

el.setAttribute('total',newTotal);

el.setAttribute('my',0);

el.innerHTML = (newTotal ==0) ? '赞' : newTotal + ' 赞';

}

el.style.display = (newTotal == 0) ? '' : 'inline-block';

}

//定义操作回复函数operateReply

function operateReply(el){

var commentBox = el.parentNode.parentNode.parentNode;//评论容器

var txt = el.innerHTML;

if(txt == '回复'){

var box = commentBox.parentNode.parentNode;

var textarea = box.getElementsByTagName('textarea')[0];

var user = commentBox.getElementsByClassName('user')[0];

clearTimeout(timer);

textarea.onfocus();

textarea.focus();

textarea.value = '回复' + user.innerHTML;

textarea.onkeyup();

}

else{

removeNode(commentBox);

}

// 遍历每个分享li，绑定事件，运用到了事件代理

for(var i = 0;i < lis.length;i++){

lis[i].onclick = function(e){

e = e || window.event;

var el = e.srcElement || e.originalTarget;

switch(el.className){

case 'close':

removeNode(el.parentNode);

break;

//赞分享

case 'praise':

praiseBox(el.parentNode.parentNode.parentNode,el);

break;

//回复灰色按钮

case 'btn btn-off':

clearTimeout(timer);

break;

//回复蓝色按钮

case 'btn':

replyBox(el.parentNode.parentNode.parentNode);

break;

//赞回复

case 'comment-praise':

praiseReply(el);

break;

//对回复操作

case 'comment-operate':

operateReply(el);

break;

}

//输入框

var textarea = lis[i].getElementsByTagName('textarea')[0];

textarea.onfocus = function(){

this.parentNode.className = 'text-box text-box-on';

this.value = (this.value == '评论…') ? '' : this.value;

this.onkeyup();

}

textarea.onblur = function(){

var me = this;

if(this.value == ''){

timer = setTimeout(function(){

me.parentNode.className = 'text-box';

me.value = '评论…';

},200);

}

textarea.onkeyup = function(e){

var len = this.value.length;

var p = this.parentNode;

var btn = p.children[1];

var word = p.children[2];

if(len == 0 || len > 140){

btn.className = 'btn btn-off';

}

else{

btn.className = 'btn';

}

word.innerHTML = len + '/140';

}

</script>

</head>

<body>

<span class="user">Andy：</span>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。

</p>

</div>

</div>

<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>

<p class="comment-text"><span class="user">我：</span>写的太好了。</p>

2014-02-19 14:36

</p>

</div>

</li>

</ul>

</div>

</li>

<span class="user">人在旅途：</span>三亚的海滩很漂亮。

</p>

</div>

</div>

<p class="comment-text"><span class="user">老鹰：</span>我也想去三亚。</p>

2014-02-19 14:36

</p>

</div>

</li>

</ul>

</div>

</li>

<span class="user">小Y：</span>英国艺术家 Jane Perkins 能利用很多不起眼的东西进行创作，甚至是垃圾。首饰、纽扣、玩具等等都可以作为他创作的工具并创作出惟妙惟肖的画作，丝毫不逊色于色彩丰富的颜料。

</p>

</div>

</div>

</ul>

<div class="text-box">/*最下方评论区*/

</div>

</li>

</ul>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

人人网评论功能

参与学习 27697 人
解答问题 147 个

仿人人网评论，让你的网页活跃起来，赶快来学习让功能的实现吧

进入课程

本课相似问答

11 回答

13 回答

16 回答

9 回答

搜索更多本课相关问答

我要回答关注问题

热搜

最近搜索清空

2 回答

本课相似问答