JS中基于分裂法的彩色文本背景效果实例

首先看看实现效果图。


实施步骤:

1,获取要使用的元素;



2,声明一个数组变量(arrcolor)来存储颜色值;



三.向按钮添加单击事件;



4,把文本框的值,并使用分割的方法将文本框中的字符串值转换成一个数组(ARR)。



5、环形存储器阵列中的价值(ARR)和添加span标签。



6、设置跨标签的背景颜色:从阵列(arrcolor)循环中得到的价值;



7,将集合内容添加到div;

效果完整代码:






JS中使用分裂法的彩色文本背景效果示例

div {宽度:300px;高度:200px;border: 1px solid # 333;背景:# FFF;padding: 20px;线高度:40px;}
跨填充:5px { 15px };微软雅黑字体;


在window.onload =函数(){
无功odiv = document.getelementbyid('div1);
VaR AINP = document.getelementsbytagname(输入的);
无功arrcolor = {# F00 ',' # ff0 ',' # f0f ',' # 0ff};

AINP { 1 }。onclick =函数(){
var str = AINP { 0 }的价值;
var arr = str.split(' ');

对于(var i = 0;i < arr.length;i++){
ARR {我} =+ ARR {我} +;

}
odiv.innerhtml = arr.join(' ');
}
}













总结

用JS分割法实现彩色文本背景效果的效果,这已经结束了。有兴趣的朋友可以自己做操作看看,希望能帮助大家学习。