Code d'implémentation HTML pour ajouter des indices de quantité sur les boutons de message

Nous savons que lorsqu'il y a des messages non lus dans WeChat ou QQ, il y aura une invite de quantité rouge. Cet article présente principalement le code d'implémentation de l'ajout de marqueurs de quantité sur le bouton de message en HTML. Les amis qui en ont besoin peuvent s'y référer. . J'espère que cela pourra aider tout le monde.

code html :

<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>

code css :

/*角标 */
    .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;
    }

code js :

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(){
                }
            });
    }

Obtenir l'effet :

Comment tout le monde l'a-t-il appris ? Dépêchez-vous et essayez-le vous-même.

Recommandations associées :

Implémentation HTML d'une boîte d'invite simple

Implémentation de la fonction d'invite de notification de bureau HTML5

js+html Obtenez l'heure actuelle du système

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!