colortext.js文档

马黑黑 · 发表于 2024-6-17 11:51

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

colortext.js 用于给web文档中 class="c7" 的所有html元素渲染彩色字效果，演示如下：

君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。

Hello Javascript!

使用方法：

方法一：适用于自由环境

// 自定义颜色数组：省略则使用默认七彩色

var hlColors = ['red','green','blue','orange','magenta'];

</script>

上法，如果使用默认颜色，代码仅需第6行。若使用自己定义的颜色，设置颜色的代码块应放在引用资源文档之前，颜色数量不限（下法同）。

方式二：适用于dz论坛

var sf = document.createElement('script');

sf.charset = 'utf-8';

sf.src = 'https://638183.freep.cn/638183/web/js2024/colortext.js';

document.body.appendChild(sf);

// 自定义颜色数组：可以省略

var hlColors = ['red','green','blue','orange','magenta'];

</script>

此法，自定义颜色数组放前放后都生效。

正确引用资源文档后，页面所有的 class="c7" 的元素，文本都将是出彩的，例如如下的div和h2：

<div class="c7">DIV盒子输出彩色字</div>

<h2 class="middle c7">莫道君行早</h2>

上面代码，h2标签的class有两个名称，一个是 middle，一个是 c7，后者是渲染彩色字的标识。

着色的效果：

colortext渲染彩色字的效果取决于浏览器对 ::highlight() 伪元素的支持与否，若支持：

每一个字，含字母、标点等，其着色机制是从预定义的颜色中随机抽去的，每一个字节一种颜色，着色速度快、性能消耗低。

若不支持：

使用渐变背景着色方法，具体是使用重复性线性渐变背景+前景色透明来实现，按 200*40px 的尺寸重复渐变，列的颜色一致，行的颜色随机平铺并以 200*40 为单位重复往右铺开。背景渐变作用于文本整体而非单个文字，可能出现一个字出现多种颜色的现象。整体性能也很好，资源消耗不算高。

关于兼容问题：

colortext 已经考虑了主要的兼容性问题，但如果浏览器连 background-clip 都不支持，那得通过一个字一个字地加上 span 标签，资源消耗偏大、运行速度偏慢，很遗憾，colortext 没有使用此实现机制。

最后给出一个论坛使用的完整实例代码：

<style>

#tBox { font-size: 20px; }

</style>

花潮论坛<br>

条条道路通水吧

</div>

var sf = document.createElement('script');

sf.charset = 'utf-8';

sf.src = 'https://638183.freep.cn/638183/web/js2024/colortext.js';

document.body.appendChild(sf);

var hlColors = ['red','green','blue'];

</script>

马黑黑 · 发表于 2024-6-17 11:53

【附】colortext.js 源码

/* colorfont.js by Mahei on 2024-6-17
彩色字效果：渲染 class="c7" 元素
① 浏览器支持 CSS Custom Highlight API 使用 ::highlight() 渲染
② 否则使用 background-clip: text 渲染
可以定义自己的颜色数组 hlColors
*/
(function() {
if(typeof hlColors === 'undefined' || hlColors === null) hlColors = ['#ad26ad', '#5d0a99','#0000ff',' #07c607', '#b3b308', '#ffa500', '#ff0000'];
const highlights = [], cnum = hlColors.length;
const pseudoHLight = () => {
const hstr = hlColors.map((c,k) => `::highlight(color-${k+1}) {color: ${c}; }`).join('\n');
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = hstr;
document.body.appendChild(style);
for (let i = 0; i < cnum; i++) {
const colorHighlight = new Highlight();
highlights.push(colorHighlight);
CSS.highlights.set(`color-${i + 1}`, colorHighlight);
}
};
const bgHLight = () => {
const bg = [...new Set(hlColors)] ;
const hstr = `.bgHLight {
background-image: repeating-linear-gradient(to right, ${bg});
background-size: 200px 40px;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}`;
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = hstr;
document.body.appendChild(style);
};
const bgColorText = (ele) => {
const walker = document.createTreeWalker(ele, NodeFilter.SHOW_TEXT);
ele.classList.add('bgHLight');
};
const colorText = (ele) => {
const walker = document.createTreeWalker(ele, NodeFilter.SHOW_TEXT);
while(walker.nextNode()) {
const textNode = walker.currentNode;
const text = textNode.textContent;
for(let i = 0; i < text.length; i++) {
const range = new Range();
range.setStart(textNode, i);
range.setEnd(textNode, i + 1);
highlights[Math.floor(Math.random() * cnum)].add(range);
}
}
};
const setFontColor = (eles) => {
eles.forEach(ele => {
if(CSS.highlights) {
colorText(ele);
}else{
bgColorText(ele);
}
})
};
CSS.highlights ? pseudoHLight() : bgHLight();
const elems = document.querySelectorAll('.c7');
setFontColor(elems);
})();

复制代码

东篱闲人 · 发表于 2024-6-17 11:59

本帖最后由马黑黑于 2024-6-17 12:48 编辑

庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。
乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。

予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯。朝晖夕阴，气象万千。此则岳阳楼之大观也。前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？
若夫霪雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐耀，山岳潜形；商旅
不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧讒畏讥，满目萧然，感极而悲者矣。
至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，
郁郁青青；而或长烟一空，皓月千里，浮光跃金，静影沉璧；渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。

嗟夫！予尝求古仁人之心，或异二者之为。何哉？不以物喜，不以己悲。居庙堂之高，则忧其民；处江湖之远，则忧其君。是进亦忧，退亦忧。然则何时而乐耶？
其必曰“先天下之忧而忧，后天下之乐而乐”乎。噫，微斯人，吾谁与归！