转载:ColorDivide颜色插件

转自:https://github.com/Geocld/ColorDivideJS

(function () {
    var options = {
        splitter: 'char'
    }
    //helper
    var getRandomColor = function(){
      return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
    }

    function injector(t, splitter) {
        var text = t.textContent,
            //a = text.split(splitter),
            a,
            after,
            inject = '';
        if(splitter === 'char') {
            a = text.split('');
            after = '';
        }
        else if (splitter === 'word') {
            a = text.split(' ');
            after = ' ';
        }
        else if (splitter === 'line') {
            var r = t.innerHTML;
            var e = document.createElement('div');
            r = r.replace(/<br>/ig, 'eefec303079ad17405c889e092e105b0');
            e.innerHTML = r;
            text = e.textContent;
            a = text.split('eefec303079ad17405c889e092e105b0');
            after = '';
            e = null;//free storge
        }


        if (a.length) {
            for(var i = 0; i < a.length; i++) {
                var font_color = getRandomColor();
                inject += '<span style="color:'+font_color+'">' + a[i] + '</span>' + after;
            }
            t.setAttribute('aria-label', text);
            t.innerHTML = inject;
        }
    }
    //API
    var api = {
        config: function (opts) {
            if(!opts) return options;
            for(var key in opts) {
                options[key] = opts[key];
            }
            return this;
        },

        listen: function listen(elem) {
            if (typeof elem === 'string') {
                var elems = document.querySelectorAll(elem),
                    i = elems.length;
                    while (i--) {
                        listen(elems[i]);
                    }
                    return
            }
            injector(elem, options.splitter);

            return this;
        }
    }
    this.ColorDivide = api;
})();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容