前言

你进入这篇文章的原因是文章的标题独特还是因为单纯的想要做彩虹色呢?

写这篇文章我也是突发奇想的，因为我服务器内的称号插件支持彩虹色，制作彩虹色的网站w，但是效果并不理想，与实际的偏差太大了

效果根本不在一个层次，有字体原因，字体大小原因然后我就F12稍微魔改了下，还把字体改成了Minecraft.ttf，这种感觉一下子就出来了嘛

原版

普通使用

使用原帖的生成器即可制作彩虹字了，以原帖的网页进行操纵示例

直接输入文字再选择颜色即可

[雪容融]

没错就是选择[自定义HTML]模块输入代码就行

文章标题

不过这个文章的标题也是直接丢代码即可

魔改

呜呜，我自己也是个网页萌新，改的内容很烂，dalao萌多多包涵嘛~

改的过程也不放出来了，太麻烦了w

主要有修改的地方就是

~~支持修改预览时的字体大小~~
~~支持使用自己的ttf字体~~
界面UI更加简洁、清爽

欢迎来体验w，改的很乱呜呜，dalao别硕了，硕了俺也不会改了w

HTML代码 ==> 展开 / 收起

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<title>渐变生成</title>
<style>
  @charset "gb2312";
body {
	font-size: 18px;
	font-family: "微软雅黑";
	font-weight: lighter;
	color: #444;
	background-color: #06801a44;
	margin: 0;
	padding: 0;
	word-break:break-all;
	word-wrap:break-word;
}
textarea, input, select {
	resize: none;
	outline: none;
	font-size: 1em;
	font-family: "微软雅黑";
	font-weight: lighter;
}
.main {
	max-width: 800px;
	min-width: 400px;
	margin: 0 auto;
}
.main .path a {
	text-decoration: none;
	color: #fff;
}
.main .path a:hover {
	text-decoration: underline;
	border-bottom: 1px solid #fff;
}
.main .content {
	background-color: #fff;
	padding: 40px;
	text-align: justify;
	text-justify: distribute;
	border-radius: 30px;
}
.main .content .area {
	max-width: 728px;
	line-height: 160%;
	overflow: hidden;
}
</style>
</head>
<body> 
      <br>
    <br>
    <br>
    <br>
<div class="main"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="content" > 
    <tr>
      <td valign="top" class="area"><form name=form1 action="" method=post>
	    <div><textarea id=text1 name=text1 style="border:2px solid #ccc; padding:5px; width:96%; height:100px;" wrap=VIRTUAL>我是彩虹字</textarea></div>
        <div>选择颜色：　起始颜色<input type=color title=取色板 onclick=this.form.start_color.value=this.value name=start_color> 
                    　　 终止颜色<input type=color onKeyUp=this.form.end_color.value=this.value title=取色板 name=end_color></div>
        <div>代码格式：　<label><input type=radio CHECKED value=ubb name=format>转换成UBB代码</label>　　 
                    <label><input type=radio value=html name=format>转换成HTML代码</label></div>
        <div align="center" style="margin:5px; "><input id=cur_color type=hidden name=cur_color> 
		<input onclick="MM_callJS('pv()')" type=button value="= 预　览 =" name=Button> 
        <input onclick="MM_callJS('gen_onclick()')" type=button value="= 生　成 =" name=Button2> 
        <input onclick="MM_callJS('reset_form()')" type=button value="= 重　来 =" name=Reset_bt></div>
        
        <div id="preview"></div>
        <div><textarea id=text2 ondblclick=copy_to_cb() onmouseover=this.select() name=text2 style="border:2px solid #ccc; padding:5px; width:96%; height:200px; font-size:14px;" readOnly wrap=VIRTUAL></textarea></div>
      </form>
    </tr> 
  </table> 
</div> 
<script>
  function get_color(tv)
 {
    var Hcolor = dlgHelper.ChooseColorDlg(tv).toString(16);
    with(event.srcElement){

        Hcolor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor;
    }
    return  Hcolor;
}

function pv(){ //preview
	if(!document.form1.text1.value){
		alert('没有文字可以转换！');
		document.form1.text1.focus();
	}else{
		document.getElementById('preview').innerHTML=generate('html',document.form1.text1.value);
	}
}

function gen_onclick(){
	if(document.form1.format[0].checked==true){
		document.form1.text2.value=generate('ubb',document.form1.text1.value);
	}else{
		document.form1.text2.value=generate('html',document.form1.text1.value);
		
	}
}

function generate(action,str){
	scolor=document.form1.start_color.value.replace("#","");
	ecolor=document.form1.end_color.value.replace("#","");
	r1=HexToNum(scolor.substring(0,2));
	g1=HexToNum(scolor.substring(2,4));
	b1=HexToNum(scolor.substring(4,6));
	r2=HexToNum(ecolor.substring(0,2));
	g2=HexToNum(ecolor.substring(2,4));
	b2=HexToNum(ecolor.substring(4,6));
	r_step=(r1-r2-((r1-r2)%str.length))/str.length;
	g_step=(g1-g2-((g1-g2)%str.length))/str.length;
	b_step=(b1-b2-((b1-b2)%str.length))/str.length;
	if(r_step==0){r_step=3;}
	if(g_step==0){g_step=3;}
	if(b_step==0){b_step=3;}
	var str2='';
	r_color=r1;
	g_color=g1;
	b_color=b1;
	for(var i=0;i<str.length;i++){
		cur_str=str.substring(i,i+1);
		r_color=r_color-r_step;
		g_color=g_color-g_step;
		b_color=b_color-b_step;
		if(r_color>=255||r_color<0){r_color=r1;}
		if(g_color>=255||g_color<0){g_color=g1;}
		if(b_color>=255||b_color<0){b_color=b1;}
		cur_color=NumToHex(r_color)+''+NumToHex(g_color)+''+NumToHex(b_color)
		if(action=='html'){
			if(cur_str=='\n'){
				str2+='<br>';
			}else{
				str2+='<font color=#' +cur_color+ '>' + cur_str + '</font>';
			}
		}else{
			str2+='[color=#' +cur_color+ ']'+cur_str+'[/color]';
		}	
	}
	return str2;
}

function reset_form(){
	document.form1.reset();
	//document.all.td_start.bgColor='#'+document.form1.start_color.value;
	//document.all.td_end.bgColor='#'+document.form1.end_color.value;
	document.all.preview.innerHTML='';
}

function copy_to_cb() {
	if(document.form1.text2.value){
		document.form1.text2.focus();
		document.form1.text2.select();
		therange=document.form1.text2.createTextRange();
		therange.execCommand("Copy");
		alert("代码已经拷贝到剪贴板！\n\n请按Ctrl+V将其粘贴到适当的位置。");
	}
}

window.history.replaceState(null, null, window.location.href);

function MakeNum(str) {
	if((str >= 0) && (str <= 9)){
		return str;
	}
	switch(str.toUpperCase()) {
	case "A": return 10;
	case "B": return 11;
	case "C": return 12;
	case "D": return 13;
	case "E": return 14;
	case "F": return 15;
	}
}

function HexToNum(hex) {
	tens = MakeNum(hex.substring(0,1));
	ones = 0;
	ones=MakeNum(hex.substring(1,2));
	num = (tens * 16) + (ones * 1);
	return num;
}

function NumToHex(strNum) {
	var base,rem,baseS,remS;
	base = strNum / 16;
	rem = strNum % 16;
	base = base - (rem / 16);
	baseS = MakeHex(base);
	remS = MakeHex(rem);
	hex = baseS + '' + remS;
	return hex;
}

function MakeHex(x) {
	if((x >= 0) && (x <= 9)){
		return x;
	}else{
		switch(x) {
		case 10: return "A"; 
		case 11: return "B";  
		case 12: return "C";  
		case 13: return "D";  
		case 14: return "E";  
		case 15: return "F";  
		  }
	}
}


function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
</script>
</body>
</html>

前后修改对比 ==> 展开 / 收起

原版链接使用：https://www.sioe.cn/yingyong/yansejianbianwenzi-ubb-html/

修改链接使用：https://blog.tangbao.ltd/tools-1/

查看评论 - 15 条评论

Comments 15 条评论

博主 hello, world

回复

发布于 2024-03-15 21:52 ( Chrome 101 Windows 10/11 )( ) 来自: 香港

谢谢！白嫖了！(⌒▽⌒)
博主 V1Panys

回复

发布于 2023-04-27 22:55 ( Edge 112 Windows 10/11 )( ) 来自: 中国 · 山东省 · 临沂

巧了，大佬你的博客也有萌备
博主 Pinpe

回复

发布于 2023-04-06 22:42 ( Edge 109 Windows 10/11 )( ) 来自: 中国 · 江苏省 · 常州市

好啊
博主倦意

回复

发布于 2022-12-20 12:53 ( Chrome 108 Windows 10/11 )( ) 来自: 中国 · 江西 · 九江市

好活！去试试看
博主枭茗

回复

发布于 2022-09-18 13:26 ( Chrome 77 Android 10 )( ) 来自: 中国 · 浙江省 · 温州市

大佬，我点生成没反应？怎么弄？
https://zpaq.cn/%e5%bd%a9%e8%99%b9%e5%ad%97/
- 博主枭茗
  
  回复
  
  发布于 2022-09-18 14:51 ( Chrome 77 Android 10 )( ) 来自: 中国 · 浙江省 · 温州市
  
  @枭茗无语，弄半天，我直接用iframe嵌入网页了,估计是什么静态html规则没设好感觉。
  博客发文章生成不行，只能嵌入了
  汤包要是知道怎么弄告知一下，谢谢了。
  - 博主 TangBao
    
    回复
    
    发布于 2022-09-18 15:15 ( Chrome 105 Windows 10/11 )( ) 来自: 香港
    
    @枭茗直接引用body以及head就行了
    
    meta和title删掉即可
- 博主 TangBao
  
  回复
  
  发布于 2022-09-18 15:14 ( Chrome 105 Windows 10/11 )( ) 来自: 香港
  
  @枭茗你这是内网吧..都不能正常访问
博主不好耶

回复

发布于 2022-08-18 18:43 ( Firefox 103 Windows 10/11 )( ) 来自: 中国 · 安徽 · 阜阳市

好耶
博主 Nevermore

回复

发布于 2022-08-16 11:08 ( Chrome 104 Windows 10/11 )( ) 来自: 美国

大佬，你这个[collapse title= ][/collapse],怎么兼容代码块的呀。我试了一下发现把代码块放进去格式就变了
- 博主 TangBao
  
  回复
  
  发布于 2022-08-17 12:09 ( Chrome 104 Windows 10/11 )( ) 来自: 香港
  
  @Nevermore 分成三部分
  collapse title="HTML代码"简码
  代码块
  collapse简码
  - 博主 Nevermore
    
    回复
    
    发布于 2022-08-17 19:51 ( Chrome 104 Windows 10/11 )( ) 来自: 中国 · ·
    
    @TangBao 感谢
博主 Marshiro

回复

发布于 2022-07-04 16:52 ( Edge 103 Windows 10/11 )( ) 来自: 中国 · 云南 · 曲靖市

好活
博主 RoyalDog

回复

发布于 2022-06-24 09:40 ( Edge 102 Windows 10/11 )( ) 来自: 中国 · 上海 · 上海

好看捏
博主酚小酞

回复

发布于 2022-04-15 19:32 ( Chrome 83 Android 10 )( ) 来自: 中国 · ·

好活！嫖了