-
筆記
查看全部 -
當(dāng)頁(yè)面加載完畢時(shí)
首先獲取到列表的容器
用children元素獲取到li
function removeNode(node) {
????node.parentNode.removeChild(node);
}
遍歷一下所有的li,
lis[i].onclick = function(e) {
????e = e || windows.event;
????var el = e.srcElement; //存放觸發(fā)元素
????switch(el.className) {
????????case 'close':
????????removeNode(el.parentNode)
;
}
}
查看全部 -
dfsfff
查看全部 -
給button設(shè)置屬性disabled="false"，按鈕依然是禁用狀態(tài)，需要將此屬性刪除才可以重新恢復(fù)按鈕的點(diǎn)擊狀態(tài)。
e.removeAttribute("disabled")
查看全部 -
javascript移出dom,不能直接remove dom，要先找到父級(jí)再移除這個(gè)dom子級(jí)
查看全部 -
人人網(wǎng)評(píng)論，前端技術(shù)查看全部
-
? ? function del(node) {
? ? var pn = node.parentNode;
? ? pn.parentNode.removeChild(pn);
}??
查看全部 -
使一個(gè)a標(biāo)簽的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>?不可以，因?yàn)闃?biāo)簽href=""，如果有frame框架點(diǎn)擊后會(huì)在該頁(yè)面又顯示該
查看全部 -
<!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;}????????.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);????????????}????????????//定義贊分享函數(shù)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)???"我覺(jué)得很贊"?:?"我和其他"?+?newNum+?"覺(jué)得很贊";????????????????????el.innerHTML?=?"取消贊";????????????????}else{????????????????????el.innerHTML?=?"贊";????????????????????newNum?=?oldNum?-?1;????????????????????showNum.innerHTML?=?(newNum?==?1)???""?:??newNum+?"覺(jué)得很贊";????????????????}????????????????showNum.style.display?=?(newNum?>=?1)???"block"?:?"none";????????????????showNum.setAttribute("total",newNum);????????????}????????????????????????//定義格式化日期函數(shù)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;?????????????}????????????????????????//定義發(fā)表評(píng)論函數(shù)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();????????????????????????????}????????????????????????//定義贊回復(fù)函數(shù)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";????????????}????????????????????????//定義操作回復(fù)函數(shù)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?==?"回復(fù)"){????????????????????text.value?=?"@"+user.innerHTML;????????????????????textBox.className?=?"text-box?text-box-on";????????????????}????????????}????????????//?遍歷每個(gè)分享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>輕輕的我走了，正如我輕輕的來(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"?>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>寫的太好了。</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?=?"評(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"?></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"?placeHolder?=?"評(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)作出惟妙惟肖的畫作，絲毫不遜色于色彩豐富的顏料。????????????????</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?=?"評(píng)論…"></textarea>????????????????<button?class="btn?">回?復(fù)</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函數(shù)，計(jì)算票數(shù)
? ? ? ? function vote(button){
? ? ? ? ? ??
? ? ? ? var spanTotal =?
? ? ? ? document.getElementById("total");
? ? ? ? spanTotal.innerHTML++;
? ? ? ? disabled(button);
? ? ? ??
? ? ? ? }?
? ? ? ??
? ? ? ??
? ? ? ? // 定義disabled函數(shù)，禁用投票按鈕
? ? ? ? function disabled(element){
? ? ? ? ? ? element.disabled= true;
? ? ? ? ? ? setTimeout("removeDisabled()",2000);
? ? ? ? }
? ? ? ??
? ? ? ? //這考點(diǎn)666
? ? ? ? //setTimeout里的方法參數(shù)不能為對(duì)象;
? ? ? ? //這里給button設(shè)id;
? ? ? ? //直接通過(guò)id解除button的disabled;
? ? ? ??
? ? ? ? //計(jì)時(shí)器執(zhí)行方法
? ? ? ? function removeDisabled(){
? ? ? ? ? ? var mybutton =
? ? ? ? ? ? document.getElementById("mybutton");
? ? ? ? ? ? mybutton.disabled=false;
? ? ? ? }
? ? ? ??
? ? </script>
</head>
<body>
<div class="con">投票內(nèi)容</div>
<div class="tou">
? ? <button id="mybutton" onclick="vote(this)">投票</button>
? ? <span class="ret">總票數(shù)：<span id="total">0</span>
? ? </span>
</div>
</body></html>
查看全部 -
webstorm
查看全部 -
<script type="text/javascript">
? ? ? ? // 定義vote函數(shù)，計(jì)算票數(shù)
? ? ? ? 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>
查看全部 -
實(shí)現(xiàn)事件查看全部
-
投票代碼查看全部
-
使一個(gè)a標(biāo)簽的href屬性失效 <a href="" onclick="return false;"></a> <a href="javascript:;"></a> <a href="javascript:void(0);"></a>查看全部
-
this.getAttribute('star') 返回star屬性所對(duì)應(yīng)的值查看全部
-
利用star屬性作為 每一個(gè)星星的索引n 并傳入到getStar中， 然后在getStar中 將i 定位到 當(dāng)前點(diǎn)擊的 索引， 最后 當(dāng)前定位的 i 變紅色， 其它沒(méi)定位到的 i 為 默認(rèn)...查看全部
-
<script type="text/javascript"> function vote(){ var oTotal = document.getElementById("total"); var innerText = parseInt(oTotal.innerText); oTotal.innerText = innerText+1; disabled(); } // 定義disabled函數(shù)，禁用投票按鈕 function disabled(){ var oBtn = document.getElementsByTagName("button")[0]; oBtn.disabled = true; setTimeout(function(){oBtn.disabled = false;},10000); } </script> </head> <body> <div class="con">投票內(nèi)容</div> <div class="tou"> <button onclick="vote(this)">投票</button> <span class="ret">總票數(shù)：<span id="total">3</span></span> </div>查看全部
-
e是事件對(duì)象，e.srcElement,是獲取事件對(duì)象的元素。查看全部
-
praiseBox(box,el)查看全部
舉報(bào)
0/150
提交
取消