为了账号安全,请及时绑定邮箱和手机立即绑定

人人网评论功能

难度初级
时长 1小时23分
学习人数
综合评分97.7
59人评价 查看评价
10.0 内容实用
9.5 简洁易懂
9.8 逻辑清晰
  • 给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://img.mukewang.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://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" >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" >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://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" ></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" 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://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" ></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>


  • <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,是获取事件对象的元素。
  • 在触发dom上的某个事件时,会产生一个事件对象event,包含着所有与事件有关的信息。所有浏览器都支持event,但是支持度不同,在Ie中,event做为window对象的一个属性存在,所以第一句代码window.event是为了兼容IE对象事件。e.srcElement是获取到触发事件的目标元素,两行代码完成时间委托的基本需求
  • str 是一个字符串,str++ 对字符串进行加,但字符串不能进行数值加,所以结果为NaN,非法数值。
  • 事件代理的时候,使用事件对象中的srcElement属性,获取触发元素。 IE浏览器支持window.event.srcElement , 而firefox支持window.event.target。
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
您至少具备HTML/CSS/JavaScript的基础知识。
老师告诉你能学到什么?
1.学会JavaScript处理日期和时间。2.掌握Dom操作中的添加/删除子节点方法。3.使用setTimeout设置定时器。4.使用clearTimeout清除定时器以及事件代理的运用。
意见反馈 邀请有奖 帮助中心 APP下载
官方微信