Heim >Web-Frontend >HTML-Tutorial >HTML-Implementierungscode zum Hinzufügen von Mengenindizes zu Nachrichtenschaltflächen
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:'fa fa-bell-o fa-2x',size:'large',iconAlign:'top'">消息<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:
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!