<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.con {
width: 200px;
height: 200px;
background: red;
}
.tou {
width: 200px;
height: 30px;
line-height: 30px;
background: #a7cbff;
}
.tou button {
float: left;
}
.tou .ret {
float: right;
}
</style>
<script type="text/javascript">
// 定义vote函数，计算票数
function vote(btn){
var to=document.getElementById("total")
to.innerText=parseInt(to.innerText)+1;
disabled(btn);
}
// 定义disabled函数，禁用投票按钮
function disabled(btn){
btn.disabled=true;
setTimeout( function(){btn.disabled=false},10000);
}
</script>
</head>
<body>
<div class="con">投票内容</div>
<div class="tou">
<button onclick="vote(this)">投票</button>
<span class="ret">总票数：<span id="total">0</span></span>
</div>
</body>
</html>用JS实现网页投票功能，点击投票按钮，票数加1， 为了防止刷票，每次跳票的间隔为10秒。
------------------------------------------------------------------
使用事件代理，给ul-li中的子元素，添加事件监听处理。
window.onload = function() {
var list = document.getElementById('list');
var lis = list.children;
// 使用事件代理给ul-li标签中，所有的子元素添加点击事件，
// 再通过className区分是哪个元素点击了
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(e) {
e = e || window.event;
// 事件对象中的srcElement，获取事件代理的触发元素
var el = e.srcElement;
switch (el.className) {
case 'close': // 删除节点
removeNode(el.parentNode);
break;
case 'praise': // 赞，取消赞
priseBox(el.parentNode.parentNode.parentNode, el);
break;
}
}
}
// box:li标签
function priseBox(box, el) {
var praiseElement = box.getElementsByClassName('praises-total')[0];
// 转换为int数据
var oldTotal = parseInt(praiseElement.getAttribute('total'));
var txt = el.innerHTML;
var newTotal;
if (txt == '赞') {
newTotal = oldTotal + 1;
praiseElement.innerHTML = (newTotal == 1) ? '我觉得很赞' : '我和' + oldTotal + '个人觉得很赞';
el.innerHTML = '取消赞';
} else {
newTotal = oldTotal - 1;
praiseElement.innerHTML = (newTotal == 0) ? '' : newTotal + '个人觉得很赞';
el.innerHTML = '赞';
}
// 总数赋新的值
praiseElement.setAttribute('total', newTotal);
praiseElement.style.display = (newTotal == 0) ? 'none' : 'block';
}
// 删除节点（dom元素el，如何删除el元素）
function removeNode(node) {
node.parentNode.removeChild(node);
}
}<!DOCTYPE html>
<html>
<head>
<title>人人网评论</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;}
.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;
// 定义删除节点函数removeNode
//定义赞分享函数praiseBox
//定义格式化日期函数getTime
//定义发表评论函数replayBox
//定义赞回复函数praiseReply
//定义操作回复函数operateReply
// 遍历每个分享li，绑定事件
}
</script>
</head>
<body>
<ul id="list">
<li class="box clearfix">
<a class="close" href="javascript:;">×</a>
<img class="head" src="http://img.mukewang.com/536b4ad10001c94f00620060.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">Andy：</span>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。
</p>
<img class="pic" src="http://img.mukewang.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个人觉得很赞</div>
<ul class="comment-list">
<li class="comment-box clearfix" user="self">
<img class="myhead" src="http://img.mukewang.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="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">评论…</textarea>
<button class="btn ">回 复</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://img.mukewang.com/536b4ad10001c94f00620060.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">人在旅途：</span>三亚的海滩很漂亮。
</p>
<img class="pic" src="http://img.mukewang.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://img.mukewang.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">回复</a>
</p>
</div>
</li>
</ul>
<div class="text-box">
<textarea class="comment" autocomplete="off">评论…</textarea>
<button class="btn ">回 复</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://img.mukewang.com/536b4ad10001c94f00620060.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">小Y：</span>英国艺术家 Jane Perkins 能利用很多不起眼的东西进行创作，甚至是垃圾。首饰、纽扣、玩具等等都可以作为他创作的工具并创作出惟妙惟肖的画作，丝毫不逊色于色彩丰富的颜料。
</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">
<textarea class="comment" autocomplete="off">评论…</textarea>
<button class="btn ">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</li>
</ul>
</body>
</html>// 评论功能，点击回复，将输入框内容，使用innerHTML添加到回复列表中
<div class="text-box">
<textarea class="comment" autocomplete="off">评论...</textarea>
<button class="btn btn-off">回复</button>
<span class="word">...</span>
</div>
<div class="comment-content">
<p class="comment-text">...</p>
<p class="comment-time"> "2014-02-19 14:36"
<a href="javascript:;" class="comment-praise" total="2" my="1" style="display:inline-block;">2 取消赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
window.onload = function() {
var list = document.getElementById('list');
var lis = list.children;
var timer;
fonction removeNode(node) {
node.parentNode.removeChild(node);
}
function praiseBox(box, el) {
...
}
// 发表评论,box 是整个动态内容
function replyBox(box) {
// 取得输入框和 评论列表
var textarea = box.getElementsByTagName('textarea')[0];
var list = box.getElementsByTagName('comment-list')[0];
// 新增li标签，设置属性
var li = document.createElement('li');
li.className = 'comment-box clearfix';
li.setAttribute('user', 'self');
var html = '<img class="myhead" src="images/my.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(); // 失去焦点方法
}
// 2014-02-14 14:22
function getTime() {
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth() + 1;
var d = t.getDate();
var h = t.getHours();
var min = t.getMinutes();
m = m<10 ? '0'+m : m;
d = d<10 ? '0'+d : d;
h = h<10 ? '0'+h : h;
min = min<10 ? '0'+min :min;
return y + '-' + m + '-' + d + ' ' + d + ':' + min;
}
// 评论内容，赞-取消赞
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';
}
// 操作回复
function operateReply(el) {
// 评论的容器
var commentBox = el.parentNode.parentNode.parentNode;
// 整个分享的容器
var box = commentBox.parentNode.parentNode.parentNode;
var textarea = box.getElementsByTagName('textarea')[0];
var user = commentBox.getElementsByClassName('user')[0];
var txt = el.innerTEXT; // 按钮本身的文字（回复-删除）
if(txt =='回复') {
textarea.onfocus();
textarea.value = '回复' + user.innerHTML + ':';
textarea.onkeyup();
} else { // 删除节点
removeNode(commentBox);
}
}
for(var i=0; i<lis.length; i++) {
lis[i].onclick = function(e) {
e = e|| window.event;
var el = e.srcElement;
switch(el.className) { // 选择器的类名-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;
csse '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(); // 手动调用keyup事件
}
// 失去焦点，不是立即变小，而是等待一段时间变小
textarea.onblur = function() {
var me = this; // 输入框
if(this.value == ''){
// 添加定时器，延时0.5s缩小输入框
timer = setTimeout(function () {
me.parentNode.className = 'text-box';
me.value= '评论...';
}, 500);
} else {
// 里面有文字，不做任何操作
}
}
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';
}
}
}
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
