HTML implementation code for adding quantity subscripts on message buttons-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML implementation code for adding quantity subscripts on message buttons

小云云

Dec 11, 2017 am 10:21 AM

html Increase button

We know that when there are unread messages in WeChat or QQ, there will be a red quantity prompt. This article mainly introduces the implementation code of adding quantity subscripts on the message button in HTML. Friends who need it can refer to it. I hope it can help. to everyone.

html code:

<a  onclick="goMessage();" style="width: 60px;height: 100%;color: white;background: transparent;" href="#" class="easyui-linkbutton" data-options="iconCls:&#39;fa fa-bell-o fa-2x&#39;,size:&#39;large&#39;,iconAlign:&#39;top&#39;">消息<span id="msgNum" class="ii">4</span></a>

Copy after login

css code:

/*角标 */
    .ii{
        display: none;
        background: #f00;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        top: 5px;
        right: 0px;
        position: absolute;
        text-align: center;
        color: #FFF;
        z-index: 99999;
    }

Copy after login

js code:

function ajaxa(){
         $.ajax({
                type:"POST",
                dataType : "json",
                async: false,
                url : "${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do",
                data : {},
                success : function(data){
                    if(data !=null){
                        if(parseInt(data)>10){
                            $("#msgNum").show();
                            $("#msgNum").text(parseInt(data));
                        }else if(parseInt(data)> 0){
                            $("#msgNum").show();
                            $("#msgNum").text(parseInt(data));
                        }else{
                            $("#msgNum").hide();
                        }
                    }
                },
                error:function(){
                }
            });
    }

Copy after login

Achievement effect:

HTML implementation code for adding quantity subscripts on message buttons

#How has everyone learned it? Hurry up and try it yourself.

Related recommendations:

HTML implementation of simple prompt box

HTML5 desktop notification prompt function implementation

js+html Get the current system time

The above is the detailed content of HTML implementation code for adding quantity subscripts on message buttons. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn