colortext.js文档

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

马黑黑 发表于 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.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 编辑 <br /><br /><div style="font-size: 2em;" class="c7">
庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。<br>乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。<br><br>

予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯。朝晖夕阴，气象万千。此则岳阳楼之大观也。前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？<br>

若夫霪雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐耀，山岳潜形；商旅<br>不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧讒畏讥，满目萧然，感极而悲者矣。<br>

至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，<br>郁郁青青；而或长烟一空，皓月千里，浮光跃金，静影沉璧；渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。<br><br>

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

<script>
var sf1 = document.createElement('script');
sf.charset = 'utf-8';
sf1.src = 'https://638183.freep.cn/638183/web/js2024/colortext.js';
document.body.appendChild(sf1);
</script>

红影发表于 2024-6-17 12:27

发现这个用默认的也好看，毕竟设置的颜色也是随机出现的{:4_204:}

红影发表于 2024-6-17 12:28

这个能让文字五颜六色的，真有趣{:4_187:}

樵歌发表于 2024-6-17 12:39

嵌网名比较好。

马黑黑 发表于 2024-6-17 12:41

樵歌发表于 2024-6-17 12:39
嵌网名比较好。

什么都行的，你试试看

马黑黑 发表于 2024-6-17 12:42

红影发表于 2024-6-17 12:28
这个能让文字五颜六色的，真有趣
彩色字很多年前，大约20年前吧，就在论坛流星开来了，那时网上有很多在线生成彩色字的程序，都是用 span 一个字一个字地上色的

马黑黑 发表于 2024-6-17 12:44

红影发表于 2024-6-17 12:27
发现这个用默认的也好看，毕竟设置的颜色也是随机出现的

默认颜色数组其实是 mdn 举例用的颜色：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::highlight

南无月 发表于 2024-6-17 12:44

果然火狐和百分着色效果完全不一样。。
火狐渐变出现一个字多种色，好像是一片一片的上色。。
百分浏览器是一个字一个字上色，字字不同。

马黑黑 发表于 2024-6-17 12:48

东篱闲人发表于 2024-6-17 11:59
本帖最后由马黑黑于 2024-6-17 12:47 编辑
庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百 ...

{:4_190:}

南无月 发表于 2024-6-17 12:49

本帖最后由南无月于 2024-6-17 12:52 编辑 <br /><br /><style>
#tBox { font-size: 50px; font-weight:bold;}
</style>

<div id="tBox" class="c7">
彩虹字最新实现方法，快乐灌水吧<br>

</div>

<script>
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 12:50

南无月发表于 2024-6-17 12:44
果然火狐和百分着色效果完全不一样。。
火狐渐变出现一个字多种色，好像是一片一片的上色。。
百分浏览器 ...

对，是两种不同的渲染模式

马黑黑 发表于 2024-6-17 12:52

南无月发表于 2024-6-17 12:49
#tBox { font-size: 20px; }

不过这个不合适灌水用：一个页面反复加载JS不科学

南无月 发表于 2024-6-17 12:53

马黑黑发表于 2024-6-17 12:50
对，是两种不同的渲染模式

火狐的片状渐变居然也好看。。

马黑黑 发表于 2024-6-17 12:53

南无月发表于 2024-6-17 12:53
火狐的片状渐变居然也好看。。

都可以的

南无月 发表于 2024-6-17 12:54

马黑黑发表于 2024-6-17 12:52
不过这个不合适灌水用：一个页面反复加载JS不科学

啊。。这一页面三个人用了。。好象也没冲突{:4_170:}

马黑黑 发表于 2024-6-17 12:58

南无月发表于 2024-6-17 12:54
啊。。这一页面三个人用了。。好象也没冲突

其实是以影响的。但主要还是加载JS的问题，多次加载同一个文件不科学。看样纸要提升CSS级层，或等待文档加载完毕再渲染效果，无需多次加载js，只需 class="c7" 的标记就行。

南无月 发表于 2024-6-17 18:10

马黑黑发表于 2024-6-17 12:58
其实是以影响的。但主要还是加载JS的问题，多次加载同一个文件不科学。看样纸要提升CSS级层，或等待文档 ...

那要在论坛灌水用的话，你就去提提呗{:4_170:}

南无月 发表于 2024-6-17 18:11

马黑黑发表于 2024-6-17 12:53
都可以的

不同浏览器都可以渲染的如此漂亮。。
这个代码功能好强大。。
老师厉害{:4_191:}上酒

页: [1] 2 3 4

花潮论坛's Archiver

colortext.js文档