split 字符串的剪切 彩色文字效果

来源:互联网 发布:单片机控制电机 小车 编辑:程序博客网 时间:2024/06/06 08:26
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{width:300px;height:300px;border:1px #000 solid;}
        span{padding:5px 10px;font-size: 14px;color:blue;}
    </style>
    <script type="text/javascript">
        window.onload=function()
        {
            var oDiv=document.getElementById("div1");
            var alnp=document.getElementsByTagName("input");
            var arrColor=["#FFC","#CC3","#6FC"];
            alnp[1].onclick=function()
            {
                var str=alnp[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>
0 0
原创粉丝点击