<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
width:500px;
height: 300px;
border: 2px solid #ccc;
background: #f3f3f3;
padding: 20px;
line-height: 22px;
font-size: 14px;
}
span{
display: inline-block;
padding: 10px 15px;
color: #fff;
float: left;
font-size: 16px;
}
</style>
</head>
<body>
<div id="div1">
<!--<span style="background: #F02629">妙</span>
<span style="background: #45C426">味</span>
<span style="background: #388CE5">课</span>
<span style="background: #AB4DF1">堂</span>-->
</div>
<input type="text" />
<input type="button" value="提交" />
<script>
var oDiv=document.getElementById("div1"),
olnp=document.getElementsByTagName("input"),
arrColor=["#F02629","#45C426","#388CE5","#AB4DF1"];
alert(6%4);
olnp[1].onclick=function(){
var str=olnp[0].value;
var strarr=str.split('');
for(var i=0;i<strarr.length;i++){
strarr[i]="<span style='background:"+arrColor[i%arrColor.length]+"'>"+str[i]+"</span>"
}
oDiv.innerHTML+=strarr.join("");
};
</script>
</body>
</html>
split彩色文字效果实例
猜你喜欢
转载自blog.csdn.net/u012773082/article/details/88012428
今日推荐
周排行