Explication détaillée de l'exemple d'implémentation de l'indice de quantité sur le bouton de message en HTML

Cet article présente principalement le code d'implémentation de l'ajout d'indices de quantité sur le bouton de message en HTML. Les amis qui en ont besoin peuvent se référer au

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

Effet de réussite :

【Recommandations associées】

1. Tutoriel vidéo gratuit HTML

2 Exemple de code HTML Jquery pour effectuer le téléchargement de fichiers asynchrone

3. Explications illustrées des points de connaissance des en-têtes HTTP

4 Explication détaillée des balises de la liste de données HTML5 et correspondance dynamique avec les données d'arrière-plan

5. . Partagez un résumé très complet des points de connaissances HTML et CSS

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!