【html】在消息按钮上增加数量角标

怼烎@ 2022-06-15 01:13 266阅读 0赞

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代码：

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

实现效果：

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220615/7f4c15dc81824617b76904ea5d9cc2be.png

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关 html鼠标放在按钮上变色

在 HTML 中，可以使用 `:hover` 伪类来设置鼠标放在按钮上时的样式。例如，可以将按钮的背景色设置为红色： button:hover { bac

今天药忘吃喽~/ 2023年10月07日 23:26/ 0 赞/ 30 阅读

相关通知与服务——消息通知——给桌面应用添加消息角标

![0e51b337b5930365f94d32ba06f5cd13.png][] ![64f4b660833215030b819df65367716d.png][] ![

港控/mmm°/ 2023年09月28日 16:32/ 0 赞/ 117 阅读

相关小程序tabBar右上角添加角标

小程序可以在 `pages.json` 中使用 `tabBar` 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。关于 `tabBar` 的配置可以查看 [

墨蓝/ 2023年03月02日 05:19/ 0 赞/ 31 阅读

相关 [小技巧][Markdown]上标 /下标上下角标

<table> <thead> <tr> <th align="center">标签</th> <th align="center">写法</th>

r囧r小猫/ 2023年02月27日 14:58/ 0 赞/ 14 阅读

相关 Android TextView 右上角文字角标(TM, ©，® )

![实现效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

Love The Way You Lie/ 2023年01月02日 08:26/ 0 赞/ 24 阅读

相关 uni-app 消息列表改变角标数字

//向后台传的参数 let obj = { userCode:uni.getStorageSync('user').code }

阳光穿透心脏的1/2处/ 2022年12月14日 08:50/ 0 赞/ 390 阅读

相关 html图标右上角添加小图标,图片右上角增加删除图标(css布局示例)

【实例简介】【实例截图】 ![002b4c2b148e10bf43d68e72dbc50b66.png][] 【核心代码】删除图标示例 .img-wrap \{

悠悠/ 2022年10月06日 03:53/ 0 赞/ 483 阅读

相关 html如何实现商标 TM 角标

1、实现代码如下 <div>小李™</div> 小李™ 更多前端面试题请关注公众号——>面试题库即可查看1000+条面试题 ![在这里插入图片描述][d21

我会带着你远行/ 2022年09月14日 01:49/ 0 赞/ 166 阅读

相关【html】在消息按钮上增加数量角标

html代码： <a onclick="goMessage();" style="width: 60px;height: 100%;color: white;back

怼烎@/ 2022年06月15日 01:13/ 0 赞/ 267 阅读

相关 HTML ^上标

`<sup>`标签可以创建一个上标，sup是superscript的缩写。上标具有如下几个简单特点：（1）.以当前文本流中字符高度的一半为基准线。（2）.上标...

小灰灰/ 2020年05月15日 17:07/ 0 赞/ 843 阅读