-
笔记
查看全部 -
当页面加载完毕时
首先获取到列表的容器
用children元素获取到li
function removeNode(node) {
node.parentNode.removeChild(node);
}
遍历一下所有的li,
lis[i].onclick = function(e) {
e = e || windows.event;
var el = e.srcElement; //存放触发元素
switch(el.className) {
case 'close':
removeNode(el.parentNode)
;
}
}
查看全部 -
dfsfff
查看全部 -
给button设置属性disabled="false"，按钮依然是禁用状态，需要将此属性删除才可以重新恢复按钮的点击状态。
e.removeAttribute("disabled")
查看全部 -
javascript移出dom,不能直接remove dom，要先找到父级再移除这个dom子级
查看全部 -
人人网评论，前端技术查看全部
-
function del(node) {
var pn = node.parentNode;
pn.parentNode.removeChild(pn);
}
查看全部 -
使一个a标签的href属性失效方法3种： 1.<a href="" onclick="return false;"></a> 2.<a href="javascript:;"></a> 3.D<a href="javascript:void(0);"></a> <a href=""></a> 不可以，因为标签href=""，如果有frame框架点击后会在该页面又显示该
查看全部 -
<!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 function removeNode(node){ node.parentNode.removeChild(node); } //定义赞分享函数praiseBox function praiseBox(lis,el){ var showNum = lis.getElementsByClassName("praises-total")[0]; var oldNum = parseInt(showNum.getAttribute("total")); var newNum ; if(el.innerHTML == "赞"){ newNum = oldNum + 1; showNum.innerHTML = (newNum == 1) ? "我觉得很赞" : "我和其他" + newNum+ "觉得很赞"; el.innerHTML = "取消赞"; }else{ el.innerHTML = "赞"; newNum = oldNum - 1; showNum.innerHTML = (newNum == 1) ? "" : newNum+ "觉得很赞"; } showNum.style.display = (newNum >= 1) ? "block" : "none"; showNum.setAttribute("total",newNum); } //定义格式化日期函数getTime function getTime(){ var time = new Date(); var year = time.getFullYear(); var month = (time.getMonth()+1) > 10 ? time.getMonth()+1 : "0"+(time.getMonth()+1); var date = time.getDate() > 10 ? time.getDate() : "0" + time.getDate(); var hour = time.getHours() > 10 ? time.getHours() : "0" + time.getHours(); var minute= time.getMinutes() > 10 ? time.getMinutes() : "0" + time.getMinutes(); return " "+year +"-"+ month +"-"+ date +" "+ hour +":"+minute; } //定义发表评论函数replayBox function replayBox(el){ var text = el.getElementsByTagName("textarea")[0]; var ul = el.getElementsByClassName("comment-list")[0]; var li = document.createElement("li"); li.setAttribute("user","self"); li.className = "comment-box clearfix"; 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>'+text.value+'</p>'+ '<p class="comment-time">'+ getTime()+ '<a href="javascript:;" class="comment-praise" total="1" my="0" >赞</a>'+ '<a href="javascript:;" class="comment-operate">删除</a>'+ '</p>'+ '</div>'; li.innerHTML = html; ul.append(li); text.value = ""; text.onblur(); } //定义赞回复函数praiseReply function pariseReply(el){ var oldTotal = parseInt(el.getAttribute("total")); var my = el.getAttribute("my"); var newTotal; if(my == "0"){ newTotal = oldTotal + 1; el.innerHTML = newTotal + " 取消赞"; el.setAttribute("my","1"); }else{ newTotal = oldTotal - 1; el.innerHTML = (newTotal == 0) ? "赞" : newTotal + " 赞"; el.setAttribute("my","0"); } el.setAttribute("total",newTotal); el.style.display = (newTotal == 0) ? "" : "block"; } //定义操作回复函数operateReply function operateReply(box,el){ var text = box.getElementsByTagName("textarea")[0]; var user = el.parentNode.parentNode.getElementsByClassName("user")[0]; var textBox = box.getElementsByClassName("text-box")[0]; console.log(box); if(el.innerHTML == "删除"){ removeNode(el.parentNode.parentNode.parentNode); }else if(el.innerHTML == "回复"){ text.value = "@"+user.innerHTML; textBox.className = "text-box text-box-on"; } } // 遍历每个分享li，绑定事件 for(var i = 0; i < lis.length; i++){ lis[i].onclick = function (e){ e = e || window.event; var el = e.srcElement; switch(el.className){ case "close": removeNode(el.parentNode); break; case "praise": praiseBox(el.parentNode.parentNode,el); break; case "btn btn-off": clearTimeout(timer); break; case "btn ": replayBox(el.parentNode.parentNode.parentNode); break; case "comment-operate": operateReply(el.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode,el); break; case "comment-praise": pariseReply(el); break; } } var text = lis[i].getElementsByTagName("textarea")[0]; text.onfocus = function (){ this.parentNode.className = "text-box text-box-on"; this.onkeyup(); } text.onblur = function (){ var me = this; if(me.value == ""){ timer = setTimeout(function(){ me.parentNode.className = "text-box"; },400) } } text.onkeyup = function(){ var length = this.parentNode.getElementsByClassName("length")[0]; var btn = this.parentNode.getElementsByClassName("btn")[0]; btn.className = (this.value.length==0) ? "btn btn-off" : "btn "; length.innerHTML = this.value.length; } } } </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>轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。 </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" >4个人觉得很赞</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>写的太好了。</p> <p class="comment-time"> 2014-02-19 14:36 <a href="javascript:;" class="comment-praise" total="1" my="0" >1 赞</a> <a href="javascript:;" class="comment-operate">删除</a> </p> </div> </li> </ul> <div class="text-box"> <textarea class="comment" autocomplete="off" placeHolder = "评论…"></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://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" ></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">回复</a> </p> </div> </li> </ul> <div class="text-box"> <textarea class="comment" autocomplete="off" placeHolder = "评论…"></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://img1.sycdn.imooc.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" ></div> <ul class="comment-list"> </ul> <div class="text-box"> <textarea class="comment" autocomplete="off" placeHolder = "评论…"></textarea> <button class="btn ">回 复</button> <span class="word"><span class="length">0</span>/140</span> </div> </div> </li></ul></body></html>查看全部 -
<!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;
//display:none;
}
.tou .ret {
float: right;
}
</style>
<script type="text/javascript">
// 定义vote函数，计算票数
function vote(button){
var spanTotal =
document.getElementById("total");
spanTotal.innerHTML++;
disabled(button);
}
// 定义disabled函数，禁用投票按钮
function disabled(element){
element.disabled= true;
setTimeout("removeDisabled()",2000);
}
//这考点666
//setTimeout里的方法参数不能为对象;
//这里给button设id;
//直接通过id解除button的disabled;
//计时器执行方法
function removeDisabled(){
var mybutton =
document.getElementById("mybutton");
mybutton.disabled=false;
}
</script>
</head>
<body>
<div class="con">投票内容</div>
<div class="tou">
<button id="mybutton" onclick="vote(this)">投票</button>
<span class="ret">总票数：<span id="total">0</span>
</span>
</div>
</body></html>
查看全部 -
webstorm
查看全部 -
<script type="text/javascript">
// 定义vote函数，计算票数
var dis = false;
function vote(e){
if(!dis){
dis = true;
var total = document.getElementById("total").innerHTML;
document.getElementById("total").innerHTML = parseInt(total) + 1;
setTimeout(function(){
dis = false;
},10000)
}
}
</script>
查看全部 -
实现事件查看全部
-
投票代码查看全部
-
使一个a标签的href属性失效 <a href="" onclick="return false;"></a> <a href="javascript:;"></a> <a href="javascript:void(0);"></a>查看全部
-
this.getAttribute('star') 返回star属性所对应的值查看全部
-
利用star属性作为 每一个星星的索引n 并传入到getStar中， 然后在getStar中 将i 定位到 当前点击的 索引， 最后 当前定位的 i 变红色， 其它没定位到的 i 为 默认...查看全部
-
<script type="text/javascript"> function vote(){ var oTotal = document.getElementById("total"); var innerText = parseInt(oTotal.innerText); oTotal.innerText = innerText+1; disabled(); } // 定义disabled函数，禁用投票按钮 function disabled(){ var oBtn = document.getElementsByTagName("button")[0]; oBtn.disabled = true; setTimeout(function(){oBtn.disabled = false;},10000); } </script> </head> <body> <div class="con">投票内容</div> <div class="tou"> <button onclick="vote(this)">投票</button> <span class="ret">总票数：<span id="total">3</span></span> </div>查看全部
-
e是事件对象，e.srcElement,是获取事件对象的元素。查看全部
-
praiseBox(box,el)查看全部
举报
0/150
提交
取消