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分割法实现彩色文本背景效果的效果，这已经结束了。有兴趣的朋友可以自己做操作看看，希望能帮助大家学习。