html实现消息按钮上的数量角标的实例详解-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

html实现消息按钮上的数量角标的实例详解

May 22, 2017 am 10:12 AM

html

这篇文章主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下

html代码：

&lt;a  onclick=&quot;goMessage();&quot; style=&quot;width: 60px;height: 100%;color: white;background: transparent;&quot; href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; data-options=&quot;iconCls:&#39;fa fa-bell-o fa-2x&#39;,size:&#39;large&#39;,iconAlign:&#39;top&#39;&quot;&gt;
消息&lt;span id=&quot;msgNum&quot; class=&quot;ii&quot;&gt;4&lt;/span&gt;
&lt;/a&gt;

Salin selepas log masuk

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;
    }

Salin selepas log masuk

js代码：

function ajaxa(){
         $.ajax({
                type:&quot;POST&quot;,
                dataType : &quot;json&quot;,
                async: false,
                url : &quot;${pageContext.request.contextPath}/docinf/sendInform/lookForMsgNum.do&quot;,
                data : {},
                success : function(data){
                    if(data !=null){
                        if(parseInt(data)&gt;10){
                            $(&quot;#msgNum&quot;).show();
                            $(&quot;#msgNum&quot;).text(parseInt(data));
                        }else if(parseInt(data)&gt; 0){
                            $(&quot;#msgNum&quot;).show();
                            $(&quot;#msgNum&quot;).text(parseInt(data));
                        }else{
                            $(&quot;#msgNum&quot;).hide();
                        }
                    }
                },
                error:function(){
                }
            });
    }

Salin selepas log masuk

实现效果：

这里写图片描述

【相关推荐】

1. HTML免费视频教程

2. Html完成异步上传文件的Jquery代码实例

3. 对HTTP Headers知识点的图文说明

4. Html5 datalist标签详解以及与后台数据的动态匹配

5. 分享一个超全面的HTML、CSS知识点总结

Atas ialah kandungan terperinci html实现消息按钮上的数量角标的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn