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是什么

Html怎么做表格

Html kbd标签怎么用

纯css实现底层毛玻璃效果(代码示例)

Html的删除线用什么标签

18个必知必会的Html面试题(附答案解析)

什么是Html语言

Html可以用jstl标签么

利用gulp实现压缩的实例

关于Html valign属性的作用和使用方法详解(附使用方法实例)

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




打赏

取消

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

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

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

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

评论

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