在JS中用拆分方法实现彩色字符背景效果的一个例子

让我们先来看看实现效果图

效果实现步骤：

1.获取要使用的元素；

2.声明一个数组变量(arrColor)来存储颜色值；

3.向按钮添加点击事件；

4.获取文本框的值，使用split方法将文本框的字符串值转换为数组(arr)进行存储；

5.回收arr中的值并添加span标记；

6.设置跨度标签的背景颜色：从数组中循环取值(arrColor)；

7.将设置的内容添加到div

完整的效果代码：

！doctype html heartheta charset=' utf-8 '标题：在JS中使用拆分方法实现彩色字符/title style div { width :300 px；高度：200 px；border:1px固体# 333；背景# fffpadding:20px线高：40 px；} span { padding:5px 15pxFont-family:微软雅黑；}/style script window . onload=function(){ var oDiv=document . getelementbyid(' div 1 ')；var aInp=document . getelementsbytagname(' input ')；var arrColor=['#f00 '，' #ff0 '，' #f0f '，' # 0ff ']；aInp[1]。onclick=function(){ var str=AInp[0]。价值；var arr=str . split(')；for(var I=0；长度；I){ arr[I]=' span style=' background : ' arr color[I % arr color . length]' ' ' arr[I]'/span '；} odiv . innerhtml=arr . join(')；} }/script/head dydiv id=' div 1 '/div input type=' text '/input type=' button ' value=' button '/body/html摘要

JS中使用拆分方法实现彩色字符背景效果的例子到此结束。感兴趣的朋友可以自己动手，希望对大家的学习有所帮助。