Heim >Web-Frontend >HTML-Tutorial >HTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen

HTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen

小云云
小云云Original
2017-12-11 10:21:433808Durchsuche

Wir wissen, dass bei ungelesenen Nachrichten in WeChat oder QQ eine rote Mengenmarkierung angezeigt wird. In diesem Artikel wird hauptsächlich der Implementierungscode zum Hinzufügen von Mengenmarkierungen auf der Nachrichtenschaltfläche in HTML vorgestellt . Ich hoffe, es kann allen helfen.

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>


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


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


Erzielen Sie den Effekt:

HTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen

Wie haben es alle gelernt? Beeilen Sie sich und probieren Sie es selbst aus.

Verwandte Empfehlungen:

HTML-Implementierung einer einfachen Eingabeaufforderungsbox

Implementierung der HTML5-Desktop-Benachrichtigungsaufforderungsfunktion

js+html Holen Sie sich die aktuelle Systemzeit

Das obige ist der detaillierte Inhalt vonHTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn