用JS中split方法实现彩色文字背景效果实例

先来看看实现效果图

效果实现步骤：

1、获取要用到的元素；

2、声明一个数组变量（arrColor）存放颜色值；

3、给按钮添加点击事件；

4、获取文本框的value值，并用split方法把文本框的字符串值转换成数组（arr）存放；

5、循环取出存数组（arr）中的值并添加上span标签；

6、设置span标签的背景色：从数组（arrColor）循环取值；

7、把设定好的内容添加到div中；

效果完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>利用JS中split方法实现彩色文字背景效果实例</title>
<style>
div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; }
span { padding:5px 15px; font-family:微软雅黑; }
</style>
<script>
window.onload = function(){
 var oDiv=document.getElementById('div1');
 var aInp=document.getElementsByTagName('input');
 var arrColor = ['#f00','#ff0','#f0f','#0ff'];

 aInp[1].onclick=function(){
 var str = aInp[0].value;
 var arr = str.split('');

 for(var i=0; i<arr.length; i++ ){
 arr[i]='<span style="background:'+arrColor[i%arrColor.length]+'">'+arr[i]+'</span>';

 }
 oDiv.innerHTML += arr.join('');
 }
}
</script>
</head>

<body>
<div id="div1">

</div>
<input type="text" />
<input type="button" value="按钮" />
</body>
</html>

总结

用JS中split方法实现彩色文字背景效果实例到这就结束了，感兴趣的朋友们可以自己动手操作看看，希望对大家的学习工作能有所帮助。

赞 (0)

相关推荐

  • js split函数用法总结(从入门到精通)

    js split函数用法总结(从入门到精通)

    split定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separator,howmany) 参数 描述 separator 必需.字符串或正则表达式,从该参数指定的地方分割 stringObject. howmany 可选.该参数可指定返回的数组的最大长度.如果设置了该参数,返回的子串不会多于这个参数指定的数组.如果没有设置该参数,整个字符串都会被分割,不考虑它的长度. 返回值 一个字符串数组.该数组是通过在 separator

  • JavaScript 字符串与数组转换函数[不用split与join]

    两个自定义的实现字符串与数组相互转换的js函数,希望能对大家有用: 复制代码 代码如下: function StringToArray(str,substr) { /* 函数功能:字符串按照指定字符串分割转换为数组 参数: str :需转换的字符串 substr:分割字符串 返回值: 转换后的数组 */ var arrTmp = new Array(); if(substr=="") { arrTmp.push(str); return arrTmp; } var i=0, j=0,

  • js正则函数match、exec、test、search、replace、split使用介绍集合

    js正则函数match、exec、test、search、replace、split使用介绍集合

    match 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回. stringObj.match(rgExp) 参数 stringObj 必选项.对其进行查找的 String 对象或字符串文字. rgExp 必选项.为包含正则表达式模式和可用标志的正则表达式对象.也可以是包含正则表达式模式和可用标志的变量名或字符串文字. 其余说明与exec一样,不同的是如果match的表达式匹配了全局标记g将出现所有匹配项,而不用循环,但所有匹配中不会包含子匹配项. 例子1: functi

  • JS实现很酷的水波文字特效实例

    本文实例讲述了JS实现很酷的水波文字特效.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现很酷的水波文字效果</title> </head> <body bgcolor="#000000" onLoad="if (document.all)wave()"> <center> <div id='water' sty

  • js split 的用法和定义 js split分割字符串成数组的实例代码

    关于js split的用法其它也不多说什么,下面直接举例给大家看看 复制代码 代码如下: <script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new Array(); //定义一数组 strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) { document.write(strs[i

  • js中通过split函数分割字符串成数组小例子

    复制代码 代码如下: <script language="javascript"> str="2,2,3,5,6,6"; //这是一字符串 var strs= new Array(); //定义一数组 strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) { document.write(strs[i]+"<br/>"); //分割后的

  • js实现文字闪烁特效的方法

    js实现文字闪烁特效的方法

    本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码如下 <html> <head> <meta charset="gb2312" /> <title>js实现文字闪烁特效</title> </head> <script> var flag = 0; fun

  • JS溶解形式的文字切换特效

    JS溶解形式的文字切换特效 messages = new Array() messages[0] = "我们,都知道吧?" messages[1] = "我们更关注开源,欢迎发布开源源代码" messages[2] = "提供给你一个有质量的源代码资料站" mescolor = new Array() mescolor[0] = "000000" mescolor[1] = "FF0000" mescolo

  • JS旋转的彩色文字轮转特效

    文字旋转 Phrase="我们是共和国的接班人--" Balises="" Taille=40; Midx=100; Decal=0.5; Nb=Phrase.length; y=-10000; for (x=0;x' + Phrase.charAt(x) + '' } document.write (Balises); Time=window.setInterval("Alors()",10); Alpha=5; I_Alpha=0.05; f

  • js实现动画特效的文字链接鼠标悬停提示的方法

    本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

随机推荐