求源碼
阿科
2014-08-06
1 回答
舉報(bào)
0/150
提交
取消
求源碼
2014-08-06
舉報(bào)
2023-05-27
<!DOCTYPE html>
<html>
<head>
? ? <title>人人網(wǎng)評(píng)論</title>
? ? <meta charset="utf-8">
? ? <style type="text/css">
? ? ? ? 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>
? ? <script type="text/javascript">
? ? ? ? window.onload= function () {
? ? ? ? ? ? var list = document.getElementById('list');
? ? ? ? ? ? var lis = list.children;
? ? ? ? ? ? var timer;
? ? ? ? ? ? // 定義刪除節(jié)點(diǎn)函數(shù)removeNode
? ? ? ? ? ? function removeNode(node){
? ? ? ? ? ? ? ? node.parentNode.removeChild(node);//：父節(jié)點(diǎn)的子節(jié)點(diǎn)
? ? ? ? ? ? }
? ? ? ? ? ? //定義贊分享函數(shù)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) ? '我覺(jué)得很贊' :? '我和' + oldTotal + '個(gè)人覺(jué)得很贊';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? el.innerHTML = '贊';
? ? ? ? ? ? ? ? ? ? newTotal = oldTotal - 1;
? ? ? ? ? ? ? ? ? ? praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '個(gè)人覺(jué)得很贊';
? ? ? ? ? ? ? ? }
praiseElement.setAttribute('total',newTotal);//及時(shí)更新點(diǎn)贊人的總數(shù)，total是事件是屬性，在html里有出現(xiàn)
praiseElement.style.display = (newTotal == 0) ? 'none' : 'block';
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? //定義格式化日期函數(shù)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;
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? //定義發(fā)表評(píng)論函數(shù)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();
? ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? //定義贊回復(fù)函數(shù)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';
}
? ? ? ? ? ??
? ? ? ? ? ? //定義操作回復(fù)函數(shù)operateReply
? ? ? ? ? ? function operateReply(el){
var commentBox = el.parentNode.parentNode.parentNode;//評(píng)論容器
var txt = el.innerHTML;
if(txt == '回復(fù)'){
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 = '回復(fù)' + user.innerHTML;
textarea.onkeyup();
}
else{
removeNode(commentBox);
}
? ? ? ? ? ? }
? ? ? ? ? ? // 遍歷每個(gè)分享li，綁定事件，運(yùn)用到了事件代理
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;
//回復(fù)灰色按鈕
case 'btn btn-off':
clearTimeout(timer);
break;
//回復(fù)藍(lán)色按鈕
case 'btn':
replyBox(el.parentNode.parentNode.parentNode);
break;
//贊回復(fù)
case 'comment-praise':
praiseReply(el);
break;
//對(duì)回復(fù)操作
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 == '評(píng)論…') ? '' : this.value;
this.onkeyup();
}
textarea.onblur = function(){
var me = this;
if(this.value == ''){
timer = setTimeout(function(){
me.parentNode.className = 'text-box';
me.value = '評(píng)論…';
},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>
<ul id="list">
? ? <li class="box clearfix">
? ? ? ? <a class="close" href="javascript:;">×</a>
? ? ? ? <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>
? ? ? ? <div class="content">
? ? ? ? ? ? <div class="main">
? ? ? ? ? ? ? ? <p class="txt">
? ? ? ? ? ? ? ? ? ? <span class="user">Andy：</span>輕輕的我走了，正如我輕輕的來(lái)；我輕輕的招手，作別西天的云彩。
? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? <img class="pic" src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg" alt=""/>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="info clearfix">
? ? ? ? ? ? ? ? <span class="time">02-14 23:01</span>
? ? ? ? ? ? ? ? <a class="praise" href="javascript:;">贊</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="praises-total" total="4" style="display: block;">4個(gè)人覺(jué)得很贊</div>
? ? ? ? ? ? <ul class="comment-list">
? ? ? ? ? ? ? ? <li class="comment-box clearfix" user="self">
? ? ? ? ? ? ? ? ? ? <img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt=""/>
? ? ? ? ? ? ? ? ? ? <div class="comment-content">
? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-text"><span class="user">我：</span>寫(xiě)的太好了。</p>
? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-time">
? ? ? ? ? ? ? ? ? ? ? ? ? ? 2014-02-19 14:36
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1 贊</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-operate">刪除</a>
? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <div class="text-box">
? ? ? ? ? ? ? ? <textarea class="comment" autocomplete="off">評(píng)論…</textarea>
? ? ? ? ? ? ? ? <button class="btn ">回 復(fù)</button>
? ? ? ? ? ? ? ? <span class="word"><span class="length">0</span>/140</span>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </li>
? ? <li class="box clearfix">?
? ? ? ? <a class="close" href="javascript:;">×</a>
? ? ? ? <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>
? ? ? ? <div class="content">
? ? ? ? ? ? <div class="main">
? ? ? ? ? ? ? ? <p class="txt">
? ? ? ? ? ? ? ? ? ? <span class="user">人在旅途：</span>三亞的海灘很漂亮。
? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? <img class="pic" src="http://img1.sycdn.imooc.com//536b4aec0001a70f01960228.jpg" alt=""/>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="info clearfix">
? ? ? ? ? ? ? ? <span class="time">02-14 23:01</span>
? ? ? ? ? ? ? ? <a class="praise" href="javascript:;">贊</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="praises-total" total="0" style="display: none;"></div>
? ? ? ? ? ? <ul class="comment-list">
? ? ? ? ? ? ? ? <li class="comment-box clearfix" user="other">
? ? ? ? ? ? ? ? ? ? <img class="myhead" src="http://img1.sycdn.imooc.com//536b4b050001b06c00310030.jpg" alt=""/>
? ? ? ? ? ? ? ? ? ? <div class="comment-content">
? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-text"><span class="user">老鷹：</span>我也想去三亞。</p>
? ? ? ? ? ? ? ? ? ? ? ? <p class="comment-time">
? ? ? ? ? ? ? ? ? ? ? ? ? ? 2014-02-19 14:36
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-praise" total="0" my="0">贊</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="javascript:;" class="comment-operate">回復(fù)</a>
? ? ? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? <div class="text-box">
? ? ? ? ? ? ? ? <textarea class="comment" autocomplete="off">評(píng)論…</textarea>
? ? ? ? ? ? ? ? <button class="btn ">回 復(fù)</button>
? ? ? ? ? ? ? ? <span class="word"><span class="length">0</span>/140</span>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </li>
? ? <li class="box clearfix">
? ? ? ? <a class="close" href="javascript:;">×</a>
? ? ? ? <img class="head" src="http://img1.sycdn.imooc.com//536b4ad10001c94f00620060.jpg" alt=""/>
? ? ? ? <div class="content">
? ? ? ? ? ? <div class="main">
? ? ? ? ? ? ? ? <p class="txt">
? ? ? ? ? ? ? ? ? ? <span class="user">小Y：</span>英國(guó)藝術(shù)家 Jane Perkins 能利用很多不起眼的東西進(jìn)行創(chuàng)作，甚至是垃圾。首飾、紐扣、玩具等等都可以作為他創(chuàng)作的工具并創(chuàng)作出惟妙惟肖的畫(huà)作，絲毫不遜色于色彩豐富的顏料。
? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="info clearfix">
? ? ? ? ? ? ? ? <span class="time">02-11 13:17</span>
? ? ? ? ? ? ? ? <a class="praise" href="javascript:;">贊</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="praises-total" total="0" style="display: none;"></div>
? ? ? ? ? ? <ul class="comment-list">
? ? ? ? ? ? </ul>
? ? ? ? ? ? <div class="text-box">/*最下方評(píng)論區(qū)*/
? ? ? ? ? ? ? ? <textarea class="comment" autocomplete="off">評(píng)論…</textarea>
? ? ? ? ? ? ? ? <button class="btn ">回 復(fù)</button>
? ? ? ? ? ? ? ? <span class="word"><span class="length">0</span>/140</span>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </li>
</ul>
</body>
</html>