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

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82261580

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');
                    }
                }
            }
        }

css部分：

        /*clear style*/
        html {
            color: #000;
            background: #FFF
        }

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        fieldset, img {
            border: 0
        }

        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal
        }

        ol, ul {
            list-style: none
        }

        caption, th {
            text-align: left
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal
        }

        q:before, q:after {
            content: ''
        }

        abbr, acronym {
            border: 0;
            font-variant: normal
        }

        sup {
            vertical-align: text-top
        }

        sub {
            vertical-align: text-bottom
        }

        input, textarea, select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit;
            *font-size: 100%
        }

        legend {
            color: #000
        }

        a {
            text-decoration: none
        }

        /*start*/
        html {
            width: 100%;
            height: 100%;
            background: url("../images/fashion-004.jpg") no-repeat center center;
            -webkit-background-size: cover;
            background-size: cover;
        }

        #comment {
            margin: 100px auto;
            width: 1000px;
            background-color: #fff;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 0 80px 10px rgba(0, 0, 0, .3);
        }

        #enjoy {
            width: 100%;
            height: 200px;
            resize: none;
            padding: 20px;
            font-size: 20px;
            color: #666;
        }

        #btn_share {
            margin-right: 60px;
        }

        #btn_share, #btn_put {
            background-color: #ace;
            outline: none;
            border: none;
            width: 100px;
            height: 40px;
            font-size: 20px;
            color: #fff;
            margin-top: 20px;
        }

        #share {
            display: flex;
            justify-content: flex-end;
        }

        #share button:hover, #btn_put:hover {
            background-color: #8aa;
        }

        #ul {
            width: 120px;
            padding: 10px;
            border-radius: 10px;
            margin-left: -20px;
            margin-top: 10px;
            text-align: center;
            display: none;
            box-shadow: 0 0 10px 1px rgba(0,0,0,.2);
        }

        #ul li {
            margin-top: 5px;
            user-select: none;
            color: #666;
        }

        #ul li:hover {
            color: #aaa;
        }
        #footer{
            background-color: #EEE;
            padding: 10px;
            margin-top: 20px;
            border-radius: 10px;
        }
        #footer p {
            margin-top: 10px;
            color: #666;
            border-bottom: 1px dashed #666;
            padding-bottom: 10px;
        }

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>