<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现文字放大效果</title>
<script type="text/javascript">
var n = 12
function chanTxt()
{
var obj = document.getElementById("test")
if(n <= 42)
{
obj.style.fontSize = n+"px"
}
n++
}
</script>
</head>
<body>鼠标经过橙色部分
<div id="test" onmouseover="setInterval('chanTxt()',100)" style="width:300pxheight:50pxfont-size:12pxline-height:50pxbackground:#f90">代码家园</div>
</body>
</html>
<br>鼠标滑过橙色部分，文字逐渐放大。 重新预览效果请刷新本页面~<br><hr>收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<style>#ul1{ margin:0px 0pxlist-style:none}
.ul2{ margin:0px 0pxlist-style:nonebackground-color:#00FFCC}
a{ cursor:pointer}
.axy{ display:none}
</style>
<script>
function x(y)
{
var uy="u"+y
var zky="zk"+y
var sjy="sj"+y
var desd=document.getElementById(uy).style.display
//alert(desd)
if((desd=='')||(desd=='block')){
document.getElementById(uy).style.display='none'
document.getElementById(zky).style.display='block'
document.getElementById(sjy).style.display='none'}
else if(desd=='none'){
document.getElementById(uy).style.display='block'
document.getElementById(zky).style.display='none'
document.getElementById(sjy).style.display='block'
}
}
</script>
<ul id="ul1">
<li><a id="zk1" onclick="x(1)" class="axy">1展开</a><a id="sj1" onclick="x(1)">1缩进</a><ul id="u1"class="ul2"><li>11</li><li>12</li></ul></li>
<li><a id="zk2" onclick="x(2)" class="axy">2展开</a><a id="sj2" onclick="x(2)">2缩进</a><ul id="u2"class="ul2"><li>21</li><li>22</li></ul></li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a id="zk6" onclick="x(6)" class="axy">6展开</a><a id="sj6" onclick="x(6)">6缩进</a><ul id="u6"class="ul2"><li>61</li><li>62</li></ul></li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
先来看看实现效果图效果实现步骤：
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方法实现彩色文字背景效果实例到这就结束了，感兴趣的朋友们可以自己动手操作看看，希望对大家的学习工作能有所帮助。
