html完成在消息按鈕上增加數(shù)量角標(biāo)的完成代碼
發(fā)表時(shí)間：2024-05-09 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]我們知道微信或者QQ在有未讀消息的時(shí)候，就會(huì)有紅色的數(shù)量提示，本文主要介紹了html在消息按鈕上增加數(shù)量角標(biāo)的實(shí)現(xiàn)代碼,需要的朋友可以參考下，希望能幫助到大家。html代碼：<a onclick="goMessage();" style="width: 60p...
我們知道微信或者QQ在有未讀消息的時(shí)候，就會(huì)有紅色的數(shù)量提示，本文主要介紹了html在消息按鈕上增加數(shù)量角標(biāo)的實(shí)現(xiàn)代碼,需要的朋友可以參考下，希望能幫助到大家。
html代碼：
<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代碼：
/*角標(biāo) */
.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代碼：
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(){
}
});
}
實(shí)現(xiàn)效果：
怎么樣大家學(xué)會(huì)了嗎？趕緊動(dòng)手自己嘗試一下吧。
相關(guān)推薦：
HTML實(shí)現(xiàn)簡(jiǎn)單的提示框
HTML5桌面通知提示功能的實(shí)現(xiàn)
js+html獲取系統(tǒng)當(dāng)前時(shí)間
以上就是html實(shí)現(xiàn)在消息按鈕上增加數(shù)量角標(biāo)的實(shí)現(xiàn)代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
