• 使用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、显示效果

  • 相关阅读:
    如何去除ecshop标题和网站底部的Powered by ECShop
    ecshop标签
    安装Wamp后 Apache无法启动的解决方法
    wamp5中的apache不能启动,80端口被占用
    iOS UI-AlertView(警示框)和ActionSheet(选择框、操作表单)
    iOS UI-三种简单的动画设置
    iOS UI-IOS开发中Xcode的一些使用技巧
    iOS UI-九宫格
    iOS开发-开发文档安装
    iOS UI-创建空项目
  • 原文地址:https://www.cnblogs.com/dinphy/p/5877681.html
Copyright © 2020-2023  润新知