HTML code to add quantity badge to message button

HTML code to add quantity badge to message button

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'">Message<span id="msgNum" class="ii">4</span></a>

CSS code:

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

Result:

這里寫圖片描述

The above is the implementation code for adding quantity subscript to the message button in html introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  A detailed introduction to setting up Jenkins on Tencent Cloud Server

>>:  Example code for using CSS to darken the font color of the selected area when scrolling

Recommend

MySQL advanced learning index advantages and disadvantages and rules of use

1. Advantages and Disadvantages of Indexes Advant...

How to use Vuex's auxiliary functions

Table of contents mapState mapGetters mapMutation...

How to open a page in an iframe

Solution: Just set the link's target attribute...

How to implement hot deployment and hot start in Eclipse/tomcat

1. Hot deployment: It means redeploying the entir...

Summary of several replication methods for MySQL master-slave replication

Asynchronous replication MySQL replication is asy...

How to implement the prototype pattern in JavaScript

Overview The prototype pattern refers to the type...

Install and configure ssh in CentOS7

1. Install openssh-server yum install -y openssl ...

Vue+Echart bar chart realizes epidemic data statistics

Table of contents 1. First install echarts in the...

Usage of HTML H title tag

The usage of H tags, especially h1, has always bee...

Pitfall notes of vuex and pinia in vue3

Table of contents introduce Installation and Usag...

Docker network principles and detailed analysis of custom networks

Docker virtualizes a bridge on the host machine. ...

Javascript to achieve the drag effect of the login box

This article shares the specific code of Javascri...

JavaScript Html to implement the mobile red envelope rain function page

This article example shares the specific code of ...