Js添加消息提示数量

发布时间:2017-3-30 4:55:20 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Js添加消息提示数量 ",主要涉及到Js添加消息提示数量 方面的内容,对于Js添加消息提示数量 感兴趣的同学可以参考一下。

接到个新需求,类似以下这种需求,得把它封装成一个插件

后端给返回一个这种数据

var data = [    {        key:"020506",        num:5    },    {        key:"03",        num:2    }];
key:

02:表示第一层,0205:表示第二层,020506:第三层

如果第三层有新消息,则它本身和它上面的层级都需要显示提示,并显示数量,另外,后端将需要添加提示的元素,都加上了data-newinfo属性,里面的值是它当前的层级。

num:

消息提示的数量

一些注意点
var newinfo = document.createElement('newinfo');

原本想创建一个span元素,但想想还是不太行,因为对应的那个页面很有可能设置了span的样式,而我们是不希望这样的,因此创建了一个特别的元素。

/*          使用说明:data:数据setInfo():将消息提示添加到页面中new NewInfo(data).setInfo();------------------------------------<div data-newinfo="020505"></div>var data = [    {        key:"020506",        num:5    },    {        key:"03",        num:2    }];*/function NewInfo(data){    this.data = data;    // 获取所有需要添加新消息提示的元素    this.newinfoDoms = Array.prototype.slice.call(document.querySelectorAll("[data-newinfo]"));    // 样式    this.sty = "padding: 2px 5px;background-color: red;border-radius: 100%;color: #fff;font-size: 12px;vertical-align: 4px;line-height:1;";}NewInfo.prototype = {    // 获取所需的信息    getInfo:function(){        var _this = this;        var arr = [];        this.newinfoDoms.forEach(function(item,index){            var isTrue = true;            _this.data.forEach(function(item2,index){                var isNewInfo = item2.key.substring(0,item.dataset.newinfo.length)===item.dataset.newinfo;                if(isNewInfo&&item.dataset.newinfo){                    if(isTrue){                        arr.push({                            'item':item,                            'num':item2.num                        });                    }else{                        arr[arr.length-1].num += item2.num;                    }                    isTrue = false;                }            });        });        return arr;    },    // 添加到相应的页面中    setInfo:function(){        var _this = this;        var arr = this.getInfo();        arr.forEach(function(current,index){            var newinfo = document.createElement('newinfo');            newinfo.style.cssText = _this.sty;            if(current.num>0){                newinfo.innerHTML = current.num;            }else{                newinfo.style.paddingTop = '0';                newinfo.style.paddingBottom = '0';            }            current.item.appendChild(newinfo);        })    }};

效果


上一篇:融云即时通讯 添加地理位置信息的功能
下一篇:[迷宫中的算法实践]迷宫生成算法——递归分割算法

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款