js——发表评论和分享功能

js部分：

        window.onload=function(){
            var btnShare=document.getElementById('btn_share');
            var btnPut=document.getElementById('btn_put');
            var ul=document.getElementById('ul');
            var li=ul.children;
            //分享关闭
            document.onclick=function(){
                ul.style.display='';
            };
            //分享打开
            btnShare.onclick=function(e){
                e.stopPropagation();
                ul.style.display='block';
            };
            //发表评论
            btnPut.onclick=function(){
                var getContent=document.getElementById('enjoy').value;
                if(getContent){
                    var content=document.getElementById('footer');
                    content.innerHTML='<p>'+getContent+'</p>'+content.innerHTML;
                    document.getElementById('enjoy').value='';
                }else{
                    alert('请输入内容');
                }
            };
            //分享点击
            for(var i=0;i<li.length;i++){
                li[i].index=i;
                li[i].onclick=function(e){
                    e.stopPropagation();
                    var getContent=document.getElementById('enjoy').value;
                    //qq
                    if(this.index===0){
                        var p = {
                            url: 'https://blog.csdn.net/lucky541788/article/details/81835975',/*获取URL，可加上来自分享到QQ标识，方便统计*/
                            desc: '来自浩博的分享', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
                            title : getContent,/*分享标题(可选)*/
                            summary : getContent,/*分享描述(可选)*/
                            site: 'hu\'s comment'/*分享来源 (可选) ，如：QQ分享*/
                        };


                        var s = [];
                        for (var i in p) {
                            s.push(i + '=' + encodeURIComponent(p[i] || ''));
                        }
                        var target_url = "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&') ;
                        window.open(target_url, 'qq',
                            'height=520, width=720');
                    }
                    //qq空间
                    else if(this.index===1){
                        var p1 = {
                            url: 'https://blog.csdn.net/lucky541788/article/details/81835975',/*获取URL，可加上来自分享到QQ标识，方便统计*/
                            desc: '来自浩博的分享', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
                            title : getContent,/*分享标题(可选)*/
                            summary : getContent,/*分享描述(可选)*/
                            site: 'hu\'s comment'/*分享来源 (可选) ，如：QQ分享*/
                        };


                        var s1 = [];
                        for (var i1 in p1) {
                            s1.push(i1 + '=' + encodeURIComponent(p1[i1] || ''));
                        }
                        var target_url1 =  "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?"+ s1.join('&') ;
                        window.open(target_url1, 'qZone',
                            'height=520, width=720');
                    }
                    //微信
                    else if(this.index===2){
                        var p2 = {
                            url: 'https://blog.csdn.net/lucky541788/article/details/81835975',/*获取URL，可加上来自分享到QQ标识，方便统计*/
                            desc: '来自浩博的分享', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
                            title : getContent,/*分享标题(可选)*/
                            summary : getContent,/*分享描述(可选)*/
                            site: 'hu\'s comment'/*分享来源 (可选) ，如：QQ分享*/
                        };


                        var s2 = [];
                        for (var i2 in p2) {
                            s2.push(i2 + '=' + encodeURIComponent(p2[i2] || ''));
                        }
                        var target_url2 ="http://qr.liantu.com/api.php?text=http://test.qicheyitiao.com" + s2.join('&') ;
                        window.open(target_url2, 'weixin',
                            'height=520, width=720');
                    }
                    //微博
                    else {
                        var param = {
                            url: 'https://blog.csdn.net/lucky541788/article/details/81835975',/*获取URL，可加上来自分享到QQ标识，方便统计*/
                            desc: '来自浩博的分享', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
                            title : getContent,/*分享标题(可选)*/
                            summary : getContent,/*分享描述(可选)*/
                            site: 'hu\'s comment'/*分享来源 (可选) ，如：QQ分享*/
                            };
                        var temp = [];
                        for( var p3 in param ){
                            temp.push(p3 + '=' +encodeURIComponent( param[p3 ] || '' ) )
                        }
                        var target_url3 =
                            "http://service.weibo.com/share/share.php?"+temp.join('&');
                        window.open(target_url3, 'sinaweibo',
                            'height=430, width=400');
                    }
                }
            }
        }

html部分：

<div id="comment">
    <div id="header">
        <textarea name="comment" id="enjoy"></textarea>
        <div id="share">
            <div>
                <button id="btn_share">分享</button>
                <ul id="ul">
                    <li>分享至QQ</li>
                    <li>分享至QQ空间</li>
                    <li>分享至微信</li>
                    <li>分享至微博</li>
                </ul>
            </div>
            <button id="btn_put">发表评论</button>
        </div>
    </div>
    <div id="footer">
    </div>
</div>