传统彩虹字生成器
本帖最后由 马黑黑 于 2024-10-12 19:42 编辑 <br /><br /><style>#pa { margin: 20px auto; width: 760px; }
#resbox, #txtbox { width: 100%; height: 300px; box-sizing: border-box; padding: 10px; font-size: 16px; overflow: auto; }
#resbox { font-size: 20px; }
.twrap { margin: 10px 0; }
.twrap input:invalid { background-color: red; }
.toRight { float: right; }
</style>
<div id="pa">
<div id="resbox"></div>
<div class="twrap">
<label for="fsize">字号(16~100)：</label>
<input type="text" id="fsize" pattern="{1,3}" aria-label="3" value="60" />
<label for="bold">粗体</label>
<input type="checkbox" id="fbold" value="bold" />
<span class="toRight"><output id="copyMsg"></output><button id="btncopy" type="button" value="copy">复制HTML代码</button></span>
</div>
<div class="twrap"><textarea id="txtbox" placeholder="输入文字"></textarea></twrap>
</div>
<script>
var fontsize = fsize.value = 60;
rainbow = (t) => {
var lines = t.split('\n');
var outs = [];
lines.forEach(line => {
var font = `font:${fbold.checked ? 'bold' : 'normal'} ${getFontSize(fsize.value)}px sans-serif`;
//outs.push(`<p style="font-size: ${getFontSize(fsize.value)}px">`);
outs.push(`<p style="${font}">`);
var chars = line.split('');
chars.forEach(char => {
var color = `#${Math.random().toString(16).substring(2,8)}`;
char = `<span style="color:${color}">${char}</span>`;
outs.push(char);
});
outs.push('</p>');
});
return outs.join('');
};
getFontSize = (value) => {
var val = parseInt(value);
if (val < 16) val = 16;
if (val > 100) val = 100;
if (isNaN(val)) val = 16;
fontsize = val;
return val;
};
fsize.onchange= () => {
resbox.innerHTML = rainbow(resbox.innerText);
fsize.value =fontsize;
}
fsize.onclick = () => fsize.select();
btncopy.onclick = () => {
var code = resbox.innerHTML;
if (navigator.clipboard) {
navigator.clipboard.writeText(code);
copyMsg.value = '复制成功！';
} else {
txtbox.value = code;
txtbox.focus();
txtbox.select();
document.execCommand('copy');
copyMsg.value = '复制好了！';
txtbox.value = resbox.innerText;
txtbox.blur();
}
setTimeout(() => {
copyMsg.value = '';
}, 2000);
};
resbox.onclick = fbold.onclick = () => resbox.innerHTML = rainbow(resbox.innerText);
txtbox.oninput = () => resbox.innerHTML = rainbow(txtbox.value);
resbox.innerHTML = rainbow('彩虹字生成器');
</script> 本帖最后由 马黑黑 于 2024-10-12 19:44 编辑
使用：
（一）在大文本框输入文字，彩虹字会实时生成；
（二）可以修改字号（px单位），取值范围16~100，修改后单击页面任意地方，彩虹字会立即刷新。输入非法数字或字符时，程序会自动做处理；
（三）如果对当下的彩虹字效果不满意，可单击彩虹字区域，彩虹字会随机生成新的效果，直至满意为止；
（四）单击“复制HTML”按钮可将彩虹字HTML代码复制到剪切板中。
【更新记录】
2024年10月12日 星期六 ：加入粗体字选项
发现输入的文字过多时，还能自动生成滚动条呢{:4_187:} 点击字体所在区域，看着那么多文字在眼前变色，万花筒一样，好神奇啊{:4_199:} 去复制了一下，不是源码，是生成后的结果呢。
这个好，点击让它们变色，看顺眼了生成出来就可以使用了{:4_204:} 又是个漂亮的在线互动帖子呢，真棒{:4_199:} 红影 发表于 2024-10-12 11:45
发现输入的文字过多时，还能自动生成滚动条呢
这个只需要 CSS 属性 overflow: auto 红影 发表于 2024-10-12 11:46
点击字体所在区域，看着那么多文字在眼前变色，万花筒一样，好神奇啊
这个不神奇：给每个字加 span 标签，span 带 style 属性 马黑黑 发表于 2024-10-12 11:59
这个只需要 CSS 属性 overflow: auto
嗯嗯，知道了{:4_187:} 马黑黑 发表于 2024-10-12 11:59
这个不神奇：给每个字加 span 标签，span 带 style 属性
看效果很神奇啊{:4_173:} 红影 发表于 2024-10-12 13:54
看效果很神奇啊
这是十多年前论坛曾经风行过的效果 马黑黑 发表于 2024-10-12 15:39
这是十多年前论坛曾经风行过的效果
那么早就风行过了啊，没想到。 红影 发表于 2024-10-12 16:37
那么早就风行过了啊，没想到。
哦，是作图吧，不是代码实现的？ 红影 发表于 2024-10-12 16:37
那么早就风行过了啊，没想到。
当时正是论坛最嘚瑟的时候 马黑黑 发表于 2024-10-12 17:04
当时正是论坛最嘚瑟的时候
彩虹字那时也让黑黑大放光彩吧{:4_173:} 红影 发表于 2024-10-12 20:02
彩虹字那时也让黑黑大放光彩吧
怎么可能？黑光没人看见 马黑黑 发表于 2024-10-12 20:36
怎么可能？黑光没人看见
彩虹一般的黑黑横空出世啊{:4_187:} 红影 发表于 2024-10-12 21:46
彩虹一般的黑黑横空出世啊
{:4_196:}
加入了粗体字体选项 马黑黑 发表于 2024-10-12 22:10
加入了粗体字体选项
还专门加了个选项呢，真不错。
嗯，选择粗体感觉变化很大呢。 红影 发表于 2024-10-12 22:31
还专门加了个选项呢，真不错。
嗯，选择粗体感觉变化很大呢。
对，粗体字会很肥壮，端庄大气