html实现在消息按钮上增加数量角标的实现代码


本文摘自PHP中文网,作者小云云,侵删。

我们知道微信或者QQ在有未读消息的时候,就会有红色的数量提示,本文主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下,希望能帮助到大家。

html代码:


1

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*角标 */

    .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代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

                }

            });

    }


实现效果:

这里写图片描述

怎么样大家学会了吗?赶紧动手自己尝试一下吧。

相关推荐:

HTML实现简单的提示框

HTML5桌面通知提示功能的实现

js+html获取系统当前时间

以上就是html实现在消息按钮上增加数量角标的实现代码的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

详解Html实现在线预览word、excel、pdf等文件的功能(附代码)

Html怎么设置背景音乐

Html怎么去掉元素的边框

Html p标签为什么不能嵌套div?还有关于Html p标签的css样式的实例介绍

Html怎么设置p标签行间距

Html hr标签怎么用

Html实现网页动态时钟

Html如何转换为pdf

Html标题,段落,换行,水平线,特殊字符应该如何使用

Html里的hr水平线应该如何使用

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...