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

Y2J
发布: 2017-05-22 10:12:56
原创
2926 人浏览过

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

html代码:

 消息4 
登录后复制

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; }
登录后复制

js代码:

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(){ } }); }
登录后复制

实现效果:

这里写图片描述

【相关推荐】

1.HTML免费视频教程

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

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

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

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

以上是html实现消息按钮上的数量角标的实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!