jquery消息红点提示

图片

html

<a title="消息" id="h-message" href="javascript:void(0)"><i class="iconfont icon-daohang-xiaoxitixing navi"></i><span id="msgNum" class="ii"><span id="num" ></span></span></a>

js

if(data.data !=null){
                    
                        if(data.data!=0&&data.data<10){
                            $('#msgNum').css({'width':'12px'})
                            $("#msgNum").show();
                            $("#num").show();
                            $("#num").text(parseInt(data.data));
                        }else if(data.data!=0&&data.data>=10&&data.data<100){
                            $("#msgNum").show();
                            $('#msgNum').css({'width':'18px'})
                            $("#num").show();
                            $("#num").text(parseInt(data.data));
                        }else if(data.data!=0&&data.data>100){
                            $("#msgNum").show();
                            $('#msgNum').css({'width':'18px'})
                            $("#num").show();
                            $("#num").text('MAX');
                        }else{
                            $("#msgNum").hide();
                            $("#num").hide();
                            console.log('无待办事项');
                        }
                }else{
                    console.log('异常');
                }

css

/*角标 */
    .ii{
        /* display: none; */
        display: block;
        background: #f00;
        border-radius: 50%;
        /*  12px; */
        height: 12px;
        top: 10px;
        right: 5px;
        position: absolute;
        text-align: center;
        /* color: #FFF; */
        z-index: 99999;
    }
    
    #num{
        color: #FFF;
        z-index: 999999;
        position: absolute;
        top: -25px;
        left: 2px;
        /* text-align: center; */
    }