使用jquery为个人博客园首页公告栏添加用户登录与注销

  未登录前,注销的字体颜色为黑色,登录后,登录的字体为蓝色。

1、在公告栏添加布局显示代码

<!--显示登录 Begin-->
<!--   隐藏调用html代码-->
<div class="hide">
<!--------------------------用户登陆前后显示------------------------------->
    <div class="login_message " style="display: none;"></div>
        <div >
            <a id="lnkLogin">hi,请登录</a> - 
            <a href="https://ing.cnblogs.com/" target="_blank">闪存</a> - 
            <a href="http://msg.cnblogs.com/inbox" target="_blank">消息</a> - 
            <a id="lnkLoginout">注销</a></br>
        </div>
    </div>
<!-------------------------用户登陆前后显示结束---------------------------->
</div>
<!--   隐藏调用html代码end-->

2、在布局后添加js代码

<!--******js代码开始******-->
<script type="text/javascript">
    $(document).ready(function(){
        //***************全局变量*************
        var dangqurl=window.location.href;  //获取当前url
        var loginy ;   // 登陆状态        1为已登录         0为未登陆    
        //ajax获取设置登录信息
        $.ajax({  
            url:"http://www.cnblogs.com/GetLoginInfo.aspx",
            data:'{}',  
            type: 'post',
            async: false,
            dataType: 'text',
            contentType: 'application/json; charset=utf-8',
            success: function (data){    
                if (data) {   
                     var reset=data.replace(/document.write("/g,"").replace(/");/,"").replace(/[ /,"").replace(/]/,"");
                     $(".login_message").html(reset);        
                     loginz=$(".login_message").find("a:first").html();
                     bkurl= $(".login_message").find("a:first").attr("href"); 
                //登录设置
                     if(loginz !="登录"){
                         $(".headTopRight").html($(".ylogin").html());
                          loginy=1  //设置登录状态
                          login_name=loginz;  
                    //获取博客地址     
                        var bokarr=new Array();        
                        bokarr=bkurl.split("/");
                        bok_link=bokarr[3];     
                        $(".login_namez").html(loginz);
                        $(".login_namez").attr("href","http://www.cnblogs.com/"+bok_link);
                        $(".login_namez1").attr("href","http://www.cnblogs.com/"+bok_link);
                        $("#lnkLoginout").attr("href","http://passport.cnblogs.com/logout.aspx?ReturnUrl="+dangqurl);
                        window.location_href=dangqurl;
                        $(".wdyz").attr("href","http://home.cnblogs.com/u/"+bok_link);      
                    }
                    if(loginz=="登录"){
                        $(".headTopRight").html($(".nlogin").html());
                             loginy=0  //设置登录状态          
                        $("#lnkLogin").attr("href","http://passport.cnblogs.com/login.aspx?ReturnUrl="+dangqurl);
                        window.location_href=dangqurl;
                    }
                //登录 设置结束
                }                 
            },                
            erro:function (){                 
                loginy=0;
                login_type="user";
                $(".login_main").html($(".nlogin").html());
                $("#lnkLogin").attr("href","http://passport.cnblogs.com/login.aspx?ReturnUrl="+dangqurl);
                window.location_href=dangqurl;
            }
        });
        //获取登录信息结束
    });
</script>
<!--显示登录 End-->

3、显示效果

原文地址:https://www.cnblogs.com/dinphy/p/5877681.html