标签: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