标签:pre UNC rand word turn innerhtml key 调用 attr
(function () { var options = { splitter: ‘char‘ } //获取随机颜色 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, newText = ‘‘; 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(); newText += ‘<span style="color:‘+font_color+‘">‘ + a[i] + ‘</span>‘ + after; } //t.setAttribute(‘aria-label‘, text); t.innerHTML = newText; } } //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; })();
<script src="ColorDivide.js"></script> <script> ColorDivide.listen(‘#demo1‘); //插件的链式调用(利用当前对象) ColorDivide.config({splitter: ‘word‘}).listen(‘#demo2‘); //插件的链式调用(利用当前对象) ColorDivide.config({splitter: ‘line‘}).listen(‘#demo3‘); //插件的链式调用(利用当前对象) </script>
插件的链式调用(利用原型链)下回析解。。。。。。。。。。。。。。。。。。
标签:pre UNC rand word turn innerhtml key 调用 attr
原文地址:https://www.cnblogs.com/Longhua-0/p/9280098.html