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

JS realizes the front-end paging effect

This article example shares the specific code of ...

Deploy the Vue project on a Linux server

Case 1 vue-cli builds the vue3 project, uploads t...

How to detect Ubuntu version using command line

Method 1: Use the lsb_release utility The lsb_rel...

Detailed process of building mysql5.7.29 on centos7 of linux

1. Download MySQL 1.1 Download address https://do...

How to use JavaScript and CSS correctly in XHTML documents

In more and more websites, the use of XHTML is rep...

Detailed explanation of Vue element plus multi-language switching

Table of contents Preface How to switch between m...

js to write the carousel effect

This article shares the specific code of js to ac...

Implementation of socket options in Linux network programming

Socket option function Function: Methods used to ...

The marquee tag in HTML achieves seamless scrolling marquee effect

The <marquee> tag is a tag that appears in ...

Specific implementation methods of MySQL table sharding and partitioning

Vertical table Vertical table splitting means spl...

Problems installing TensorRT in docker container

Uninstall the installed version on Ubuntu: sudo a...

Several ways to update batches in MySQL

Typically, we use the following SQL statement to ...

How to remove MySQL from Ubuntu and reinstall it

First delete mysql: sudo apt-get remove mysql-* T...